Radio

View on GitHub

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.
<Component
  initialState={{
    options: [
      { label: 'Read-only', value: 'read-only' },
      { label: 'Write', value: 'write' },
      { label: 'Restricted', value: 'restricted' }
    ],
    value: 'restricted'
  }}
>
  {({ state, setState }) => (
    <RadioGroup
      label="Permissions"
      value={state.value}
      options={state.options}
      onChange={value => setState({ value })}
    />
  )}
</Component>
code Hide code

Bigger size

Permissions
The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
<Component
  initialState={{
    options: [
      { label: 'Read-only', value: 'read-only' },
      { label: 'Write', value: 'write' },
      { label: 'Restricted', value: 'restricted' }
    ],
    value: 'restricted'
  }}
>
  {({ state, setState }) => (
    <RadioGroup
      marginTop={40}
      size={16}
      label="Permissions"
      value={state.value}
      options={state.options}
      onChange={value => setState({ value })}
    />
  )}
</Component>
code Hide code

RadioGroup Props

This component composes ui-box

optionsarrayOf = []
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.
sizeenum = 12
The size of the radio circle. This also informs the text size and spacing.
isRequiredbool = false
When true, the radio get the required attribute.

Radio

Radio states

<Pane aria-label="Radio Group Label 12" role="group">
  <Radio checked name="group" label="Radio default" />
  <Radio name="group" checked label="Radio checked" />
  <Radio name="group" disabled label="Radio disabled" />
  <Radio name="group" disabled label="Radio checked disabled" />
</Pane>
code Hide code

Radio states (bigger)

<Pane aria-label="Radio Group Label 16" role="group">
  <Radio checked size={16} name="group2" label="Radio default" />
  <Radio size={16} name="group2" checked label="Radio checked" />
  <Radio size={16} name="group2" disabled label="Radio disabled" />
  <Radio
    size={16}
    name="group2"
    disabled
    label="Radio checked disabled"
  />
</Pane>
code 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.
sizeenum = 12
The size of the radio circle. This also informs the text size and spacing.
isRequiredbool = false
When true, the radio get the required attribute.
isInvalidbool = false
When true, the aria-invalid attribute is true. Used for accessibility.
appearancestring = 'default'
The appearance of the checkbox. The default theme only comes with a default style.
themeobjectrequired
Theme provided by ThemeProvider.