Radio Button Field

View source Report an issue Edit this page

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

Prop	Type	Default	Required
`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"`	`column`	-
`css`	`CSSProperties`	-	-
`label`	`string`	-
`error`	`string`	-	-
`prompt`	`{ link: string; label: string; }`	-	-
`description`	`string`	-	-
`hideLabel`	`boolean`	-	-
`validation`	`ValidationOptions`	-	-