Set of interactive radio buttons where only one can be selected at a time.
This component inherits props from the Radio Group primitive and supports common margin props.
Contains all the parts of a radio group.
Prop | Type | Default |
---|---|---|
asChild | boolean | |
size | Responsive<"1" | "2" | "3"> | "2" |
variant | "classic" | "surface" | "soft" | "surface" |
color | enum | |
highContrast | boolean |
An item in the group that can be checked.
Use the size
prop to control the radiobutton size.
Use the variant
prop to control the visual style of the radio buttons.
Currently, we recommend using only the surface
and soft
variant following the ScaleUI Radix design system.
Composing RadioGroup.Item
within Text
automatically centers it with the first line of text.
It is automatically well-aligned with multi-line text too.
Use the native disabled
attribute to create a disabled radiobutton.