Introduction

The radio and radio group are used for selecting a single option from a list. If you need to have an unselected state, just add a radio button with a None option. Begin labels with a capital letter.

Evergreen exports two components to create radios and radio groups:

  • Radio: Directly maps to a input element.
  • RadioGroup: Helps manage a group of radios. Try this first.

RadioGroup

The RadioGroup is the preferred way to create radio groups in most use cases.

Default size

Permissions
The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
Hide code

Bigger size

Permissions
The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
Hide code

RadioGroup Props

This component composes ui-box

optionsArray<{ label: node, value: string, isDisabled?: bool }>required
The options for the radios of the Radio Group.
valuestring
The selected item value when controlled.
defaultValuestring
The default value of the Radio Group when uncontrolled.
onChangefunc
Function called when state changes.
labelstring
Label to display above the radio button options.
size12 | 16
The size of the radio circle. This also informs the text size and spacing.
isRequiredbool
When true, the radio get the required attribute.

Radio

Radio states

Hide code

Radio states (bigger)

Hide code

Radio Props

This component composes ui-box

idstring
The id attribute of the radio.
namestring
The name attribute of the radio.
labelnode
Label of the radio.
valuestring
The value attribute of the radio.
onChangefunc
Function called when state changes Signature: ``` function(event: object, checked: boolean) => void ```
disabledbool
When true, the radio is disabled.
checkedbool
When true, the radio is checked.
size12 | 16
The size of the radio circle. This also informs the text size and spacing.
isRequiredbool
When true, the radio get the required attribute.
isInvalidbool
When true, the aria-invalid attribute is true. Used for accessibility.
appearancestring
The appearance of the checkbox. The default theme only comes with a default style.