RadioGroup

RadioGroup lets users select one option from a set of mutually exclusive choices. For independent toggles, use Checkbox.

Code

<RadioGroup defaultValue="comfortable">
  <div className="tw:flex tw:items-center tw:gap-2">
    <RadioGroupItem value="default" id="default" />
    <Label htmlFor="default">Default</Label>
  </div>

  <div className="tw:flex tw:items-center tw:gap-2">
    <RadioGroupItem value="comfortable" id="comfortable" />
    <Label htmlFor="comfortable">Comfortable</Label>
  </div>

  <div className="tw:flex tw:items-center tw:gap-2">
    <RadioGroupItem value="compact" id="compact" />
    <Label htmlFor="compact">Compact</Label>
  </div>
</RadioGroup>

API

RadioGroup

Name	Type/Description
className	string | ((state: RadioGroupState) => string | undefined) | 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 = false	boolean | undefined Whether the component should ignore user interaction.
form	string | undefined Identifies the form that owns the radio inputs. Useful when the radio group is rendered outside the form.
inputRef	Ref<HTMLInputElement> | undefined A ref to access the hidden input element.
name	string | undefined 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) | undefined Callback fired when the value changes.
readOnly = false	boolean | undefined Whether the user should be unable to select a different radio button in the group.
ref	((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, RadioGroupState> | undefined 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 = false	boolean | undefined Whether the user must choose a value before submitting a form.
style	CSSProperties | ((state: RadioGroupState) => CSSProperties | undefined) | 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.

RadioGroupItem

Name	Type/Description
className	string | ((state: RadioRootState) => string | undefined) | undefined CSS class applied to the element, or a function that returns a class based on the component's state.
disabled	boolean | undefined Whether the component should ignore user interaction.
inputRef	Ref<HTMLInputElement> | undefined A ref to access the hidden input element.
nativeButton = false	boolean | undefined 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 | undefined Whether the user should be unable to select the radio button.
ref	((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null | undefined
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, RadioRootState> | undefined 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 | undefined Whether the user must choose a value before submitting a form.
style	CSSProperties | ((state: RadioRootState) => CSSProperties | undefined) | undefined Style applied to the element, or a function that returns a style object based on the component's state.
value	any The unique identifying value of the radio in a group.