Radio

Provides single user input from a selection of options.

The basic Radio usage.

Preview

See code

Option 1

A group of radio components.

Preview

See code

Option 1

Option 2

Differentiate states by color.

Description can be combined with other components.

Preview

See code

Option 1 Example description for Option 1

Disable all radios.

Preview

See code

Option 1

Option 2

Horizontal arrangement.

Preview

See code

Option 1Description for Option1

Option 2Description for Option2

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`
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`
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'

Progress

Rating

MADE & DESIGNED WITHBY BRUNO ANDRADE