Radio Group

A set of mutually exclusive options where only one item can be selected.

Accessibility

RadioGroup renders role="radiogroup" with RadioGroupItem elements using role="radio". Use aria-label on the group when no visible label is present. Keyboard navigation follows ARIA radio group behavior: arrow keys move selection, and Home/End jump to the first/last item.

Examples

Default

Default
Comfortable
Compact 
<c-radio-group value="default">
  <div class="flex items-center gap-3">
    <c-radio-group-item id="radio-default" value="default"></c-radio-group-item>
    <c-label label-for="radio-default">Default</c-label>
  </div>
  <div class="flex items-center gap-3">
    <c-radio-group-item
      id="radio-comfortable"
      value="comfortable"
    ></c-radio-group-item>
    <c-label label-for="radio-comfortable">Comfortable</c-label>
  </div>
  <div class="flex items-center gap-3">
    <c-radio-group-item id="radio-compact" value="compact"></c-radio-group-item>
    <c-label label-for="radio-compact">Compact</c-label>
  </div>
</c-radio-group>

Horizontal

Card
PayPal
Bank 
<c-radio-group
  value="card"
  orientation="horizontal"
  radio-group-classes="gap-6 items-center"
>
  <div class="flex items-center gap-3">
    <c-radio-group-item id="radio-card" value="card"></c-radio-group-item>
    <c-label label-for="radio-card">Card</c-label>
  </div>
  <div class="flex items-center gap-3">
    <c-radio-group-item id="radio-paypal" value="paypal"></c-radio-group-item>
    <c-label label-for="radio-paypal">PayPal</c-label>
  </div>
  <div class="flex items-center gap-3">
    <c-radio-group-item id="radio-bank" value="bank"></c-radio-group-item>
    <c-label label-for="radio-bank">Bank</c-label>
  </div>
</c-radio-group>

Disabled

Standard
Pro 
<c-radio-group value="standard" disabled>
  <div class="flex items-center gap-3">
    <c-radio-group-item
      id="radio-disabled-standard"
      value="standard"
    ></c-radio-group-item>
    <c-label label-for="radio-disabled-standard">Standard</c-label>
  </div>
  <div class="flex items-center gap-3">
    <c-radio-group-item
      id="radio-disabled-pro"
      value="pro"
      disabled
    ></c-radio-group-item>
    <c-label label-for="radio-disabled-pro">Pro</c-label>
  </div>
</c-radio-group>

Sizes

Small
Default
Large 
<c-radio-group value="default">
  <div class="flex items-center gap-3">
    <c-radio-group-item
      id="radio-size-sm"
      value="sm"
      size="sm"
    ></c-radio-group-item>
    <c-label label-for="radio-size-sm">Small</c-label>
  </div>
  <div class="flex items-center gap-3">
    <c-radio-group-item
      id="radio-size-default"
      value="default"
    ></c-radio-group-item>
    <c-label label-for="radio-size-default">Default</c-label>
  </div>
  <div class="flex items-center gap-3">
    <c-radio-group-item
      id="radio-size-lg"
      value="lg"
      size="lg"
    ></c-radio-group-item>
    <c-label label-for="radio-size-lg">Large</c-label>
  </div>
</c-radio-group>

API Reference

RadioGroup

The root container that manages selection and keyboard navigation.

Prop Type Default Description
value string '' The currently selected value
orientation 'horizontal' | 'vertical' 'vertical' Controls layout and arrow key behavior
disabled boolean false Disables all radio group items
name string '' Shared name for items in the group
aria-label string - Accessible label for the group
radio-group-classes string - Additional classes for the group container

RadioGroupItem

The selectable radio button inside a RadioGroup.

Prop Type Default Description
value string '' Unique value for the item
checked boolean false Whether the item is selected
disabled boolean false Whether the item is disabled
name string '' Optional name for the radio item
variant 'default' | 'outline' 'default' Visual style variant
size 'sm' | 'default' | 'lg' 'default' Controls the radio item size
aria-label string - Accessible label for the item
radio-group-item-classes string - Additional classes for the radio item

Events

change

Fired when the selected radio group value changes.

Detail:

  • value (string) - The selected value
radioGroup.addEventListener('change', (event) => {
  console.log('Selected:', event.detail.value);
});