Radio Group

One choice from a few that are all worth reading, filled in ink with a dot for the one chosen.

01Preview

Reply length

ShortA sentence or two.BalancedAs long as it needs.DetailedSteps, caveats, sources.

npx shadcn@latest add https://aiellie.app/r/radio-group.json

Represents the radio button itself. Renders a <span> element and a hidden <input> beside.

Prop	Type	Default	Description
value\*	Value	-	The unique identifying value of the radio in a group.
nativeButton	boolean	false	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.
disabled	boolean	-	Whether the component should ignore user interaction.
readOnly	boolean	-	Whether the user should be unable to select the radio button.
required	boolean	-	Whether the user must choose a value before submitting a form.
inputRef	React.Ref<HTMLInputElement>	-	A ref to access the hidden input element.
className	string \| ((state: Radio.Root.State) => string \| undefined)	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	React.CSSProperties \| ((state: Radio.Root.State) => React.CSSProperties \| undefined)	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	ReactElement \| ((props: HTMLProps, state: Radio.Root.State) => ReactElement)	-	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.

Attribute	Type	Description
data-checked	-	Present when the radio is checked.
data-unchecked	-	Present when the radio is not checked.
data-disabled	-	Present when the radio is disabled.
data-readonly	-	Present when the radio is readonly.
data-required	-	Present when the radio is required.
data-valid	-	Present when the radio is in a valid state (when wrapped in Field.Root).
data-invalid	-	Present when the radio is in an invalid state (when wrapped in Field.Root).
data-dirty	-	Present when the radio's value has changed (when wrapped in Field.Root).
data-touched	-	Present when the radio has been touched (when wrapped in Field.Root).
data-filled	-	Present when the radio is checked (when wrapped in Field.Root).
data-focused	-	Present when the radio is focused (when wrapped in Field.Root).