PxRadioButton

A styled radio button input. Works with v-model in a group — all radio buttons sharing the same modelValue ref will behave as a single group.

Usage

Demo

Monthly

Annual

Selected Plan: monthly

<script setup>
import { ref } from 'vue'
import { PxRadioButton } from 'praxis-vue-ui'

const plan = ref('monthly')
</script>

<template>
  <div class="flex gap-4">
    <div class="flex items-center gap-2">
      <PxRadioButton v-model="plan" value="monthly" input-id="monthly" />
      <label for="monthly">Monthly</label>
    </div>
    <div class="flex items-center gap-2">
      <PxRadioButton v-model="plan" value="annual" input-id="annual" />
      <label for="annual">Annual</label>
    </div>
  </div>
</template>

Props

Prop	Type	Default	Description
modelValuerequired	unknown	—	The current selected value in the radio group. Share the same ref across all buttons in a group.
valuerequired	unknown	—	The value this button represents. Checked when modelValue === value.
inputId	string	undefined	HTML id for the input. Use with a matching label for attribute.
disabled	boolean	false	Disables this radio button.
name	string	undefined	HTML name attribute for the input (groups native radio buttons).

Emits

Event	Payload	Description
update:modelValue	unknown	Emitted when this radio button is selected. Value is this button's value prop.