Radio Button

View source Report an issue Edit this page

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

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"`	-	-
`as`	`JSX.IntrinsicElements`	-	-
`css`	`CSSProperties`	-	-

RadioButton

Prop	Type	Default	Required
`value`	`string`	-
`asChild`	`boolean`	-	-
`checked`	`boolean`	-	-
`required`	`boolean`	-	-
`css`	`CSSProperties`	-	-
`as`	`JSX.IntrinsicElements`	-	-
`aria-label`	`string`	-	-