Radio Group - Stera UI

Default

Comfortable

Compact

Installation

pnpm dlx stera-ui add radio-group

Usage

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

<RadioGroup defaultValue="comfortable">
  <Field orientation="horizontal">
    <RadioGroupItem value="default" id="r1" />
    <FieldLabel htmlFor="r1">Default</FieldLabel>
  </Field>
  <Field orientation="horizontal">
    <RadioGroupItem value="comfortable" id="r2" />
    <FieldLabel htmlFor="r2">Comfortable</FieldLabel>
  </Field>
</RadioGroup>

With Descriptions

Default

Standard spacing for most use cases.

Comfortable

More space between elements.

Compact

Minimal spacing for dense layouts.

<RadioGroup defaultValue="comfortable">
  <Field orientation="horizontal">
    <RadioGroupItem value="default" id="r1" />
    <FieldContent>
      <FieldLabel htmlFor="r1">Default</FieldLabel>
      <FieldDescription>Standard spacing for most use cases.</FieldDescription>
    </FieldContent>
  </Field>
</RadioGroup>

In a Fieldset

Use FieldSet and FieldLegend to group radio items with an accessible legend.

Subscription Plan

Yearly and lifetime plans offer significant savings.

Monthly ($9.99/month)

Yearly ($99.99/year)

Lifetime ($299.99)

<FieldSet>
  <FieldLegend variant="label">Subscription Plan</FieldLegend>
  <FieldDescription>Yearly and lifetime plans offer significant savings.</FieldDescription>
  <RadioGroup defaultValue="monthly">
    <Field orientation="horizontal">
      <RadioGroupItem value="monthly" id="plan-monthly" />
      <FieldLabel htmlFor="plan-monthly">Monthly ($9.99/month)</FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <RadioGroupItem value="yearly" id="plan-yearly" />
      <FieldLabel htmlFor="plan-yearly">Yearly ($99.99/year)</FieldLabel>
    </Field>
  </RadioGroup>
</FieldSet>

Disabled

Option 2

Option 3

<Field orientation="horizontal" data-disabled>
  <RadioGroupItem value="option1" id="r1" disabled />
  <FieldLabel htmlFor="r1">Disabled</FieldLabel>
</Field>

API Reference

RadioGroup

Built on Base UI's RadioGroup primitive.

Prop	Type	Default
`value`	`string`	—
`defaultValue`	`string`	—
`onValueChange`	`(value: string) => void`	—
`disabled`	`boolean`	`false`
`name`	`string`	—
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`

RadioGroupItem

Prop	Type	Default
`value`	`string`	—
`disabled`	`boolean`	`false`