Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Examples

Default

Option One

Option Two

<script setup>
import { RadioGroup, RadioGroupItem, Label } from '@empathyds/vue'
</script>

<RadioGroup default-value="option-one">
  <div class="flex items-center space-x-2">
    <RadioGroupItem id="option-one" value="option-one" />
    <Label for="option-one">Option One</Label>
  </div>
  <div class="flex items-center space-x-2">
    <RadioGroupItem id="option-two" value="option-two" />
    <Label for="option-two">Option Two</Label>
  </div>
</RadioGroup>

Props

RadioGroup

Prop	Type	Default	Description
defaultValue	string	-	The default value of the radio group.
modelValue	string	-	The controlled value of the radio group.
disabled	boolean	false	Whether the radio group is disabled.
name	string	-	The name of the radio group.
required	boolean	false	Whether the radio group is required.
orientation	horizontal | vertical	vertical	The orientation of the radio group.
dir	ltr | rtl	-	The reading direction of the radio group.
loop	boolean	true	Whether the keyboard navigation should loop around.

RadioGroupItem

Prop	Type	Default	Description
value	string	-	The value of the radio item.
disabled	boolean	false	Whether the radio item is disabled.
required	boolean	false	Whether the radio item is required.

Slots

RadioGroup

Slot	Description
default	The items of the radio group.

RadioGroupItem

Slot	Description
default	The content of the radio item.