Docs
Radio Group Stacked

Radio Group Stacked

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

This component uses Radix UI
import { RadioGroupStacked, RadioGroupStackedItem } from 'ui'
 
export function RadioGroupDemo() {
  return (
    <RadioGroupStacked defaultValue="comfortable">
      <RadioGroupStackedItem
        value="default"
        id="r1"
        label="Default"
        description="The default option is the most spacious and comfortable."
      />
      <RadioGroupStackedItem
        value="comfortable"
        id="r2"
        label="Comfortable"
        description="The comfortable option is a bit more compact than the default option."
      />
      <RadioGroupStackedItem
        value="compact"
        id="r3"
        label="Compact"
        description="The compact option is the most compact and space-efficient."
      />
    </RadioGroupStacked>
  )
}

Usage

import { RadioGroupStacked, RadioGroupStackedItem } from 'ui'
<RadioGroupStacked defaultValue="comfortable">
  <RadioGroupStackedItem value="default" id="r1" label="Default" />
  <RadioGroupStackedItem value="comfortable" id="r2" label="Comfortable" />
  <RadioGroupStackedItem value="compact" id="r3" label="Compact" />
</RadioGroupStacked>

Examples

Form