Radio

Used to select one option from several options

Option 1Option 2Option 3

Usage

import { RadioGroup } from "chakra-ui-solid";

<RadioGroup.Root>
  <RadioGroup.Item>
    <RadioGroup.ItemHiddenInput />
    <RadioGroup.ItemIndicator />
    <RadioGroup.ItemText />
  </RadioGroup.Item>
</RadioGroup.Root>

One machine drives every radio in the group, so RadioGroup.Root owns the checked value and each RadioGroup.Item owns only its value. Every part inside an item — the input, the circle, the text — reads that value from the item it sits in, which is why none of them takes one.

RadioGroup.Item renders the <label> and RadioGroup.ItemHiddenInput renders the real <input type="radio"> inside it, so a click anywhere in the row picks that radio. The input is not optional — without it there is nothing focusable, nothing to submit, and nothing for the row to point at.

If you prefer a closed component composition, check out the snippet below.

Examples

Controlled

Pass the value and onValueChange props to the RadioGroup.Root component to control the selected radio button.

Option 1Option 2Option 3

Colors

Pass the colorPalette prop to the RadioGroup.Root component to change the color scheme of the component.

Sizes

Pass the size prop to the RadioGroup.Root component to change the size of the radio component.

Radio (sm)

Radio (md)

Radio (lg)

Variants

Pass the variant prop to the RadioGroup.Root component to change the appearance of the radio component.

Disabled

Pass the disabled prop to the RadioGroup.Item component to make the radio disabled.

Option 1Option 2Option 3

Form Validation

Here’s an example of a radio group driven by a signal, with a validation message on submit.

Closed Component

Here’s how to setup the Radio for a closed component composition.

Option 1Option 2Option 3

Here’s how to use it:

<RadioGroup>
  <Radio value="1">Option 1</Radio>
</RadioGroup>

Props

Root

RadioGroupRootProps
Prop	Default	Type
`defaultValue`	—	`string \| null` The radio checked when a fresh, uncontrolled group is rendered.
`disabled`	—	`boolean` Whether every radio in the group is disabled. Inherited from a surrounding Fieldset.
`form`	—	`string` The id of a form elsewhere on the page that this group submits with.
`id`	—	`string` Seeds every id the machine hands out — the root is `radio-group:{id}`, one item's hidden input `radio-group:{id}:radio:input:{value}`. Defaults to a generated id, and does not become the root element's own `id`: pass `ids` to control the attributes themselves. It is also the fallback `name` on every hidden input, so a group with no `name` still submits under something stable.
`ids`	—	`RadioGroupElementIds` Override individual element ids. The four item-level entries are functions of the item's value, because one machine addresses N of each.
`invalid`	—	`boolean` Whether every radio shows its error treatment. Inherited from a surrounding Fieldset.
`name`	—	`string` The `name` every hidden input submits under. Defaults to {@link CreateRadioGroupProps.id}.
`onValueChange`	—	`(details: RadioGroupValueChangeDetails) => void` Called whenever the checked radio changes, from either side.
`orientation`	`'vertical'`	`'horizontal' \| 'vertical'` Which way the radios run, for the arrow keys and for `data-orientation`. The `radioGroup` recipe styles neither value — a row of radios is laid out by whatever you put them in — so this is the machine's keyboard model and an attribute to write your own rules against.
`readOnly`	—	`boolean` Whether the group refuses to change while staying focusable.
`required`	—	`boolean` Whether the form requires one of these radios to be picked.
`size`	`'md'`	`ConditionalValue<'xs' \| 'sm' \| 'md' \| 'lg' \| PresetVariant<'radioGroup', 'size'>>` The circle's size, and the gap and text size of the row it sits in.
`value`	—	`string \| null` The controlled value — the `value` of the checked radio, or `null` for none. `null` means controlled, and empty; use `undefined` for uncontrolled.
`variant`	`'solid'`	`ConditionalValue<'outline' \| 'subtle' \| 'solid' \| PresetVariant<'radioGroup', 'variant'>>` How the circle is painted once it is checked — `solid` fills it with the palette, `outline` only recolours the border and widens the dot, and `subtle` tints it.

Plus Omit<HTMLChakraProps<"div">, "id"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

RootProvider

RadioGroupRootProviderProps
Prop	Default	Type
`size`	`'md'`	`ConditionalValue<'xs' \| 'sm' \| 'md' \| 'lg' \| PresetVariant<'radioGroup', 'size'>>` The circle's size, and the gap and text size of the row it sits in.
`value`*	—	`CreateRadioGroupReturn` A machine built by {@link createRadioGroup}, so the consumer owns it rather than the Root.
`variant`	`'solid'`	`ConditionalValue<'outline' \| 'subtle' \| 'solid' \| PresetVariant<'radioGroup', 'variant'>>` How the circle is painted once it is checked — `solid` fills it with the palette, `outline` only recolours the border and widens the dot, and `subtle` tints it.

Plus HTMLChakraProps<"div"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

Item

RadioGroupItemProps

Adds no prop of its own. It takes everything in zagRadioGroup.ItemProps, HTMLChakraProps<"label"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.