RadioGroup · ui.voila.dev

Designer

Developer

Copywriter

<RadioGroup.Root defaultValue="designer">
	<RadioGroup.Item value="designer" id="profession-designer" />
	<Label htmlFor="profession-designer">Designer</Label>
</RadioGroup.Root>

RadioGroup.Card swaps the dot for a selectable card, for options that need a description rather than a word.

API

RadioGroup.Root

Prop	Type	Default
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	Layout direction of the items. `vertical` stacks them (the default); `horizontal` lays them out in a wrapping row - saves consumers from rebuilding a `flex-row` wrapper for short option sets.
`className`	`string` \| `((state: RadioGroupState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`defaultValue`	`any`	—	The uncontrolled value of the radio button that should be initially selected. To render a controlled radio group, use the `value` prop instead.
`disabled`	`boolean`	—	Whether the component should ignore user interaction.
`form`	`string`	—	Identifies the form that owns the radio inputs. Useful when the radio group is rendered outside the form.
`inputRef`	`Ref<HTMLInputElement>`	—	A ref to access the hidden input element.
`name`	`string`	—	Identifies the field when a form is submitted.
`onValueChange`	`((value: any, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element \| undefined; }) => void)`	—	Callback fired when the value changes.
`readOnly`	`boolean`	—	Whether the user should be unable to select a different radio button in the group.
`render`	`ComponentRenderFn<HTMLProps, RadioGroupState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`required`	`boolean`	—	Whether the user must choose a value before submitting a form.
`style`	`CSSProperties` \| `((state: RadioGroupState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.
`value`	`any`	—	The controlled value of the radio item that should be currently selected. To render an uncontrolled radio group, use the `defaultValue` prop instead.

Plus the DOM props of the element it renders. Source: radio-group/components/radio-group-root.tsx.

RadioGroup.Card

Prop	Type	Default
`showIndicator`	`boolean`	`true`	Hide the checked-corner icon when the card's own content marks selection.
`value`	`any`	required	The unique identifying value of the radio in a group.
`className`	`string` \| `((state: RadioRootState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`disabled`	`boolean`	—	Whether the component should ignore user interaction.
`inputRef`	`Ref<HTMLInputElement>`	—	A ref to access the hidden input element.
`nativeButton`	`boolean`	—	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `true` if the rendered element is a native button.
`readOnly`	`boolean`	—	Whether the user should be unable to select the radio button.
`render`	`ComponentRenderFn<HTMLProps, RadioRootState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`required`	`boolean`	—	Whether the user must choose a value before submitting a form.
`style`	`CSSProperties` \| `((state: RadioRootState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: radio-group/components/radio-group-card.tsx.

RadioGroup.Item

Prop	Type	Default
`value`	`any`	required	The unique identifying value of the radio in a group.
`className`	`string` \| `((state: RadioRootState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`disabled`	`boolean`	—	Whether the component should ignore user interaction.
`inputRef`	`Ref<HTMLInputElement>`	—	A ref to access the hidden input element.
`nativeButton`	`boolean`	—	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `true` if the rendered element is a native button.
`readOnly`	`boolean`	—	Whether the user should be unable to select the radio button.
`render`	`ComponentRenderFn<HTMLProps, RadioRootState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`required`	`boolean`	—	Whether the user must choose a value before submitting a form.
`style`	`CSSProperties` \| `((state: RadioRootState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: radio-group/components/radio-group-item.tsx.