Preview

Installation

npx sigma-ui@latest add radio-group

Usage

<script setup lang="ts">
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
</script>

<template>
  <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>
</template>

• Use defaultValue to check an item initially, or v-model to control the checked item.
• Set orientation to match the layout, so the arrow keys move in the expected direction.

Examples

Form

Read the vee-validate docs to learn more about form validation.

API Reference

RadioGroup

Props

Prop	Type	Default
modelValue The controlled value of the radio item to check. Can be binded as v-model.	AcceptableValue	-
defaultValue The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.	AcceptableValue	-
disabled When true, prevents the user from interacting with radio items.	boolean	-
orientation The orientation of the component.	DataOrientation	-
dir The reading direction of the combobox when applicable. <br> If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.	Direction	-
loop When true, keyboard navigation will loop from last item to first, and vice versa.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
name The name of the field. Submitted with its owning form as part of a name/value pair.	string	-
required When true, indicates that the user must set the value before the owning form can be submitted.	boolean	-

Events

Event	Payload
update:modelValue Event handler called when the radio group value changes	[payload: AcceptableValue]

Slots

Slot	Scope
default The content of the component.	-

RadioGroupItem

Props

Prop	Type	Default
disabled When true, prevents the user from interacting with the radio item.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
value The value given as data when submitted with a name.	AcceptableValue	-
name The name of the field. Submitted with its owning form as part of a name/value pair.	string	-
required When true, indicates that the user must set the value before the owning form can be submitted.	boolean	-
id	string	-

Accessibility

Adheres to the Radio Group WAI-ARIA design pattern and uses roving tabindex to manage focus between the items. Reka UI handles it.

Key	Description
Tab	Moves focus to the checked item, or to the first item in the group.
Space	When focus is on an unchecked item, checks it.
ArrowDown	Moves focus to the next item and checks it.
ArrowRight	Moves focus to the next item and checks it.
ArrowUp	Moves focus to the previous item and checks it.
ArrowLeft	Moves focus to the previous item and checks it.