Radio Button Field

View source Report an issue

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

RadioButtonField

Prop	Type	Default	Required
`appearance`	`"standard"` \| `"modern"`	-	-
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`defaultValue`	`string`	-	-
`description`	`string`	-	-
`dir`	`"ltr"` \| `"rtl"`	-	-
`direction`	`"row"` \| `"column"`	`column`	-
`disabled`	`boolean`	-	-
`error`	`string`	-	-
`hideLabel`	`boolean`	-	-
`label`	`string`	-
`loop`	`boolean`	-	-
`name`	`string`	-	-
`onValueChange`	`(value: string) => void`	-	-
`orientation`	`"horizontal"` \| `"vertical"`	-	-
`prompt`	`{ link?: string \| undefined; label: string; onClick?: (() => void) \| undefined; }`	-	-
`required`	`boolean`	-	-
`validation`	`ValidationOptions`	-	-
`value`	`null` \| `string`	-	-