Radio

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

#Example

#Usage

#Compact group

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

#Large group

#With badges

#Disabled

Set isDisabled on the <RadioGroup /> to disable all options.

Or set isDisabled on a <Radio /> to disable that specific option.

#Guidelines

#When to use

• When user selects exactly one option from a small labeled set, especially when options benefit from descriptions.

#When not to use

• If there are many options or descriptions aren't needed, use a select instead.
• If options are views or modes on the same content, use a segmented control instead.
• If multiple options can be selected, use checkboxes instead.

#Props

#RadioGroup

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.
width	—	"auto" | "100%" | "fit-content" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" Radio group width.
onChange	—	(value: T) => void Callback for when user selects a different radio option.

#Radio

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.