Radio

Provides single user input from a selection of options.

The basic Radio usage.

A group of radio components.

Differentiate states by color.

Description can be combined with other components.

Disable all radios.

Horizontal arrangement.

Describe each option under its name, and let the button repeat the choice.

Attribute	Description	Type	Accepted values	Default
checked	selected or not (in single)	`boolean`	-	`false`
value	unique ident value (in group)	`string`	-	-
id	native attr	`string`	-	-
disabled	disable current radio	`boolean`	-	`false`
error	mark the field as invalid	`boolean`	-	`false`
errorMessage	message below the field	`string`	-	-
type	current type	`RadioTypes`	RadioTypes	`default`
onChange	change event	`(e: RadioEvent) => void`	-	-
ref	forwardRef	`Ref<HTMLInputElement \| null>`	-	-
...	native props	`InputHTMLAttributes`	`'id', 'className', ...`	-

Attribute	Description	Type	Accepted values	Default
initialValue	initial value	`string`	-	-
value	selected child radio	`string`	-	-
useRow	horizontal layout	`boolean`	-	`false`
disabled	disable all radios	`boolean`	-	`false`
error	mark the group as invalid	`boolean`	-	`false`
errorMessage	message below the group	`string`	-	-
onChange	change event	`(value: string) => void`	-	-
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

Attribute	Description	Type	Accepted values	Default
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

type RadioTypes =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'info'

The ref points at the native input.

• The control is a native input of type radio, reached with Tab and changed with Space, with a visible focus ring.
• Put the label text inside the Radio so a click on it also changes the value.