Forms

RadioGroup

A native radio group for choosing one option from a set.

Component

27

Import

import { RadioGroup } from "@swirski/ui";

Playground

2 controls

BlueSharp product surfaces.YellowLoud editorial moments.RedUrgent launch signals.

Controls

value

disabledOption

Usage

<RadioGroup
  name="tone"
  defaultValue="blue"
  options={[
    { value: "blue", label: "Blue" },
    { value: "yellow", label: "Yellow" },
    { value: "red", label: "Red" },
  ]}
/>

Props

9 generated

Prop	Type	Default	Notes
`className`	`string`	`-`	Generated from RadioGroupProps.
`defaultValue`	`string`	`-`	Initial selected value.
`name`Required	`string`	`-`	Native radio group name.
`onValueChange`	`((value: string) => void)`	`-`	Called when the selected value changes.
`options`Required	`RadioGroupOption[]`	`-`	Options rendered as radio inputs.
`size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from RadioGroupProps.
`tone`	`'blue' \| 'yellow' \| 'red'`	`"yellow"`	Generated from RadioGroupProps.
`value`	`string`	`-`	Controlled selected value.
`variant`	`'default' \| 'card'`	`"default"`	Generated from RadioGroupProps.

Previous: Skeleton Next: Slider