Radio Group

The Radio Group component allows users to select a single option from a list of mutually exclusive choices. It’s commonly used in forms for selecting a single option from a set.

Usage

<script>
  import { RadioGroup, RadioGroupItem } from "$lib/components/ui/radio-group";
</script>

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

Examples

API Reference

RadioGroup

Property	Type	Default	Description
value	string	undefined	The value of the selected radio item.
onValueChange	function	undefined	Function called when the value changes.
disabled	boolean	false	When true, prevents the user from interacting with the radio group.
required	boolean	false	When true, indicates that the user must select an option before the form can be submitted.
name	string	undefined	The name of the radio group when used in a form.
class	string	"grid gap-2"	Additional CSS classes to apply to the radio group.
ref	HTMLDivElement	null	Reference to the underlying HTML div element.

RadioGroupItem

Property	Type	Default	Description
value	string	required	The value of the radio item. Must be a unique string within the radio group.
disabled	boolean	false	When true, prevents the user from interacting with the radio item.
required	boolean	false	When true, indicates that the user must select this radio item before the form can be submitted.
class	string	undefined	Additional CSS classes to apply to the radio item.
ref	HTMLButtonElement	null	Reference to the underlying HTML button element.

Implementation

The Radio Group component is built on top of bits-ui primitives. It provides custom styling for checked and unchecked states, with appropriate focus and hover effects:

// RadioGroup styling
"grid gap-2"

// RadioGroupItem styling
"border-primary text-primary focus-visible:ring-ring aspect-square size-4 rounded-full border shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50"

The radio group items display a filled circle when selected, which is implemented using the Circle icon from Lucide.

This component is built with accessibility in mind, supporting keyboard navigation, screen readers, and proper ARIA attributes. The radio group ensures that only one option can be selected at a time, making it ideal for mutually exclusive choices in forms.