Radio

import { Radio } from '@enmovil/ui-design-system';

A group of radio buttons built from an items list, laid out horizontally or vertically. defaultValue sets the initially selected item, and onChange fires when the selection changes.

Properties

Property	Type	Required	Default	Allowed values	Description
defaultValue	string	Yes	—	—	key of the item selected when the group first renders. Later changes are ignored.
items	RadioItem[]	Yes	—	—	The radio options, in display order.
direction	string	No	'horizontal'	'horizontal', 'vertical'	Lays the options out in a row (horizontal, the default) or a column (vertical).

items

An array of objects (RadioItem). Each object has these fields:

Field	Type	Required	Description
key	string	Yes	Value of the option, reported as event.target.value in onChange and matched by defaultValue. Also its React key, so keys must be unique.
label	string	Yes	Text shown next to the radio button.

Other attributes

Radio passes 12 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.

Events

Name	Signature	When it fires
onChange	((e: RadioChangeEvent) => void)	Fires when a different option is selected. The new key is event.target.value.
onFocus	FocusEventHandler<HTMLDivElement>	Fires when any option in the group receives focus.
onBlur	FocusEventHandler<HTMLDivElement>	Fires when an option loses focus.
onMouseEnter	MouseEventHandler<HTMLDivElement>	Fires when the pointer enters the group.
onMouseLeave	MouseEventHandler<HTMLDivElement>	Fires when the pointer leaves the group.

Children

Radio does not accept children.

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default Radio example.

Loading playground…

Storybook

Open Radio in Storybook to try every story with the full set of controls.