Combines a RadioButtonGroup and RadioButtons with a Label and InlineMessage

RadioButtonField wraps a RadioButtonGroup to provide a legend and a InlineMessage. RadioButtonField.Item renders an individual RadioButton with an inline Label.

Note: a RadioButtonField.Item’s value must be a string.

<Form>
<RadioButtonField name="options" label="Please select an option">
<RadioButtonField.Item label="Option 1" value="1" />
<RadioButtonField.Item label="Option 2" value="2" />
</RadioButtonField>
</Form>

If you need to know when the radio group value changes, you can pass onValueChange, which takes a string type as input.

<RadioButtonField onValueChange={onChangeHandler} />

API Reference

PropTypeDefaultRequired
defaultValue
string

-

-

dir
"ltr" | "rtl"

-

-

asChild
boolean

-

-

namestring

-

-

required
boolean

-

-

orientation
"horizontal" | "vertical"

-

-

loop
boolean

-

-

value
string

-

-

onValueChange
(value: string) => void

-

-

direction
"row" | "column"
column

-

cssCSSProperties

-

-

labelstring

-

error
string

-

-

prompt
{ link: string; label: string; }

-

-

description
string

-

-

hideLabel
boolean

-

-

validation
ValidationOptions

-

-