Radio

Radio group displays a set of options and allows user to select only one.

#

#

#

RadioGroup automatically positions radios horizontally, if there are no more than 3 radios and none of them have descriptions.

#

#

#

#

Name	Default	Description
`isDisabled`	`false`	`boolean` Determines if all radios are disabled.
`children`	—	`ReactNode` Radio inputs.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` Orientation.
`value`	—	`T` Selected radio value.
`onChange`	—	`(value: T) => void` Callback for when user selects a different radio option.

#

Name	Default	Description
`isDisabled`	—	`boolean` Determines if radio is disabled.
`label`	—	`string` Label to show near the radio.
`badge`	—	`ReactNode` Badge to display near the label.
`description`	—	`ReactNode` Description to show below the label.
`tooltip`	—	`Omit<TooltipProps, "children">` Tooltip to display when hovering over the radio. These props are passed to the tooltip component.
`value`	—	`T` Radio value.

On this page

Example
Usage

Compact group
Large group
With badges
Props
RadioGroup
Radio