The RadioButton component implements the Radio component from Radix with default styling and the css prop

It needs to be wrapped with the RadioButtonGroup as it will not load without it. If only one RadioButton is needed please consider using a checkbox instead.

A RadioButton needs to be associated with a label for accessibility purposes and to display the text for it. So rather than using the RadioButton component directly in a UI, consider using a RadioButtonField, which provides a Label and displays validation errors. Use this RadioButton to compose more complex Field type components.

API Reference

RadioButtonGroup

PropTypeDefaultRequired
defaultValue
string

-

-

dir
"ltr" | "rtl"

-

-

asChild
boolean

-

-

name
string

-

-

required
boolean

-

-

orientation
"horizontal" | "vertical"

-

-

loop
boolean

-

-

value
string

-

-

onValueChange
(value: string) => void

-

-

direction
"row" | "column"

-

-

asJSX.IntrinsicElements

-

-

cssCSSProperties

-

-

RadioButton

PropTypeDefaultRequired
valuestring

-

asChild
boolean

-

-

checked
boolean

-

-

required
boolean

-

-

cssCSSProperties

-

-

asJSX.IntrinsicElements

-

-

aria-label
string

-

-