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.
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.
Usage
Labels
A label should be succinct, short, and descriptive with one to two words. This way users can quickly scan the available options.
Do: Use one to two descriptive words.
Don't: Repeat the same words. They make labels difficult to scan.
Use positive and active wording.
Do: Tell users what happens when the selection control is on.
Don't: Use negatives. They're unnatural and confusing.
Use sentence case (capitalize the first word).
Do: Sentence case makes titles easier to read.
Don't: Title case can feel more cluttered.
Use consistent label structures for options within the same group.
Do: Use sentences only or fragments only.
Don't: Mix label structure within the same group of options.
Do: Start all with a verb, all with a noun, or all with a number.
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.
Do: Use nouns that describe the choices to make.
Don't: Repeat choices or use the title as instructions.
Props
EuiRadio
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. 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 CommonProps & LabelHTMLAttributes<HTMLLabelElement> | Default value |
EuiRadioGroup
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. 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 boolean | Default value |
Prop compressed# | Description and type Tightens up the spacing between radio rows 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 HTMLAttributes<HTMLLegendElement> & CommonProps & { children: ReactNode; display?: "hidden" | "visible"; compressed?: boolean; } | Default value |