CardPicker inside RadioGroup. The group owns selection; each card supplies a value and its visible content. It uses Radio’s keyboard, form, and disabled behavior.
value and onValueChange on the group for controlled selection, or defaultValue for an initial choice. The default card renders a div with radio semantics. Avoid nesting interactive controls in its content.
Props
ReactNode
Card content inside the radio control.
string | ((state: RadioRootState) => string | undefined)
CSS class applied to the element, or a function that
returns a class based on the component’s state.
boolean
Whether the component should ignore user interaction.
Ref<HTMLInputElement>
A ref to access the hidden input element.
boolean
default:"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.boolean
Whether the user should be unable to select the radio button.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, RadioRootState>
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.boolean
Whether the user must choose a value before submitting a form.
"md" | "sm"
Visual size of the radio.
CSSProperties | ((state: RadioRootState) => CSSProperties | undefined)
Style applied to the element, or a function that
returns a style object based on the component’s state.
TValue
required
The unique identifying value of the radio in a group.