Radio and Radio group

Radios are are ideal for allowing users to select options among a small list of options, or to switch settings on/off. For longer lists of options, consider using dropdown selection components.

Radio

This component renders a basic HTML <input type="radio"> element. Use radio buttons to allow users to choose one option out of a list. They are ideal for a list of more than 2 options, and usually no more than 6 options.

When creating a list, each input should have the same name to ensure a group is established. This way when you select a radio button in that group, the other options are automatically deselected.

Make sure to pass a label to ensure a larger clickable area and ensure that screen readers will read out the label when the user is focused on the input.

Loading...

Radio group

Use a EuiRadioGroup when you want to generate a group of radio buttons by passing an array of options with an id andlabel for each object. Pass a single name property to define the group. For more details on which selection component to use, see the Component comparison.

When the individual labels for each radio do not provide a sufficient description, pass a legend to the group.

Loading...

Usage

Labels

A label should be succinct, short, and descriptive with one to two words. This way users can quickly scan the available options.

Canceled

In progress

On hold

Resolved

Do: Use one to two descriptive words.

Case is canceled

Case is in progress

Case is on hold

Case is resolved

Don't: Repeat the same words. They make labels difficult to scan.

Use positive and active wording.

Use logs

Use metrics

Do: Tell users what happens when the selection control is on.

Do not include logs

Do not include metrics

Don't: Use negatives. They're unnatural and confusing.

Use sentence case (capitalize the first word).

Read access

Write access

Create access

Delete access

Do: Sentence case makes titles easier to read.

Read Access

Write Access

Create Access

Delete Access

Don't: Title case can feel more cluttered.

Use consistent label structures for options within the same group.

Data to ship

Logs

Metric

Do: Use sentences only or fragments only.

Data to ship

Use Logs

Metric

Don't: Mix label structure within the same group of options.

Availability zones

1 zone

2 zones

3 zones

Do: Start all with a verb, all with a noun, or all with a number.

Availability zones

One zone

2 zones.

3 zones

Don't: Use ending punctuation. Exception: Question marks can be used if they add clarity.

Legends

For groups of options, add a legend that gives meaning to the options. Legends appear like a title.

Data to ship

Logs

Metrics

Do: Use nouns that describe the choices to make.

Data to ship

Logs

Metrics

Don't: Repeat choices or use the title as instructions.

Props

EuiRadio

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop onChange# ↦	Description and type Type: ChangeEventHandler<HTMLInputElement> ↦	Default value Required ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop label# ↦	Description and type Type: ReactNode ↦	Default value ↵
Prop id# ↦	Description and type Type: string ↦	Default value ↵
Prop name# ↦	Description and type Type: string ↦	Default value ↵
Prop value# ↦	Description and type Type: string ↦	Default value ↵
Prop checked# ↦	Description and type Type: boolean ↦	Default value ↵
Prop disabled# ↦	Description and type Type: boolean ↦	Default value ↵
Prop labelProps# ↦	Description and type Object of props passed to the label element Type: CommonProps & LabelHTMLAttributes<HTMLLabelElement> ↦	Default value ↵

𐘂𐘂

EuiRadioGroup

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop onChange# ↦	Description and type Type: EuiRadioGroupChangeCallback ↦	Default value Required ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop disabled# ↦	Description and type Passed down to all child EuiCheckboxes Type: boolean ↦	Default value ↵
Prop compressed# ↦	Description and type Tightens up the spacing between radio rows Type: boolean ↦	Default value ↵
Prop name# ↦	Description and type Type: string ↦	Default value ↵
Prop options# ↦	Description and type Type: EuiRadioGroupOption[] ↦	Default value [] ↵
Prop idSelected# ↦	Description and type Type: string ↦	Default value ↵
Prop legend# ↦	Description and type Adds an EuiFormLegend element as the first child If the individual labels for each radio do not provide a sufficient description, add a legend. Wraps the group in a EuiFormFieldset which adds an EuiLegend for titling the whole group. Accepts an EuiFormLegendProps shape. Type: HTMLAttributes<HTMLLegendElement> & CommonProps & { children: ReactNode; display?: "hidden" | "visible"; compressed?: boolean; } ↦	Default value ↵

𐘂𐘂