Forms

Radio & RadioGroup

Native radios sharing a `name` already handle selection and arrow keys. RadioGroup adds the group semantics screen readers need, which v0 never provided.

data-scope="radio"

Usage

ReactVueSvelteAngular

<RadioGroup name="size" label="Size">
  <Radio value="s" label="Small" />
  <Radio value="m" label="Medium" />
</RadioGroup>

<RadioGroup name="size" label="Size">
  <Radio value="s" label="Small" />
  <Radio value="m" label="Medium" />
</RadioGroup>

<RadioGroup name="size" label="Size">
  <Radio value="s" label="Small" bind:group={size} />
  <Radio value="m" label="Medium" bind:group={size} />
</RadioGroup>

<ck-radio-group label="Size">
  <ck-radio name="size" value="s" label="Small" [(selected)]="size" />
  <ck-radio name="size" value="m" label="Medium" [(selected)]="size" />
</ck-radio-group>

Props

Prop	Type	Default	Notes
`value`	string	—	This radio's value.
`label`	ReactNode	—	Label text.
`size`	"sm" \| "md" \| "lg"	`"md"`	Control size.
`RadioGroup.invalid`	boolean	`false`	Marks the group invalid. aria-invalid is not supported on role="radio", so it lives here, not on the individual radio.
`RadioGroup.orientation`	"horizontal" \| "vertical"	`"horizontal"`	Layout axis.

Prop names are identical in all four frameworks. Only two-way binding differs, and each framework uses its own idiom over the same underlying prop.