Radio

Best Practices

• Use radio buttons when the user needs to see all available options.
• If available options can be collapsed, consider using an EzField select list which uses less space.
• Radio buttons should not be used to perform commands.
• Options should be structured in a logical order, such as from simplest to most complex, or most common to least common.
• Radio buttons should have the most commonly used option selected by default.

Examples

Basic Radio Buttons

EzRadio supports outlined (default) and filled (for darker backgrounds) variants.

Radio Button Labels

To add a label to a radio button, use EzFormControlLabel and provide the EzRadio to its control prop along with the label.

You can optionally append a set of icons to the label by passing in an array of EzIcons to labelIcons in EzFormControlLabel.

Radio Colors

EzRadio supports theme palette properties (primary, secondary, error, warning, info, alert, neutral, and success) as well as all supported theme colors (ex. common.red100). Colors should have high enough contrast for accessibility.

Radio Sizes

If you want to specify a size, use the size property. We currently support small, medium (default), and large.

Radio Group

EzRadio components can be grouped using form controls (see below).

• To define the gap between radio labels, use the optional gap prop of type number on EzRadioGroup.

  • Recipe uses an 8px scaling factor, so a gap of x (of type number) is equal to x * 8px.
  • The default gap for columns is 0 and rows is 2.
• To lay out the buttons horizontally, use the optional row prop on EzRadioGroup.
• To add helper text to a radio label, use the optional helperText prop on EzFormControlLabel.

Radio Controlled Group

You can also control the radio with the value and onChange props on EzRadioGroup.

Radio Group with Conditional Content

Additional content can also be displayed depending on the selection.

Radio Group with Error State

To display an error state in a checkbox group, pass an error boolean property to EzFormControl. Be sure to include an error alert or message to indicate what the error is.

To provide proper keyboard accessibility when using grouped radio buttons, use EzRadio with the following components and their props:

• EzFormControl - used to provide context and ensure a consistent state

  • error - if true, the label is displayed in an error state
  • fullWidth - if true, the component will take up the full width of its container

• EzFormLabel - used to provide a label for a group of radio buttons

  • id - should match the ariaLabel prop of EzRadioGroup

• EzRadioGroup - used to group radio buttons

  • ariaLabel - should match the id prop of EzFormLabel
  • defaultValue - sets the default value if not controlled
  • gap - the gap between radio labels (defaults to 0 for columns and 2 for rows)
  • labelWidth - the defined width of each super radio button in a radio group
  • name - used to reference the value of the control
  • onChange - if controlled, the callback fired when the radio button is selected
  • row - lays out the buttons horizontally
  • theme - a defined theme object with optional keys color and variant for super radio buttons
  • value - if controlled, the value of the selected radio button

• EzFormControlLabel - used to provide a label for a radio button

  • control - the required control element (<EzRadio />)
  • disabled - if true, the component is disabled
  • helperText - the helper text content
  • icon - the icon for the radio button when using a super radio button
  • label - the label for the radio button
  • labelIcons - an optional array of EzIcons to display after the label
  • value - the value of the form control label

Super Radio Buttons

For larger, more visual radio buttons, provide an icon (<EzIcon />) along with an optional label to EzFormControlLabel.

• To define a set pixel width for the buttons, pass a labelWidth of type number to EzRadioGroup. Labels will wrap if needed, but should not be more than 2 lines.

• To define a theme for each button in a group, pass a theme property to EzRadioGroup.

  • color accepts either a color theme property (ex. color: 'primary'), or a custom defined values object (see example below)
  • variant accepts either filled (default) or outlined

Disabled Radio Buttons

A radio button can be made disabled by adding the optional disabled prop on either EzRadio (if standalone) or EzFormControlLabel (if in a group).

Custom Styles

Supported styles should be used, but if you need to overwrite styles for the radio, form label, form control label, or super form control label, you can do so using provided class names:

• EzRadio, EzRadio-outlined, EzRadio-filled, EzRadio-checked, EzRadioIcon-checked, EzRadioIcon-checked-dot, EzRadio-disabled, EzRadio-input, EzRadioIcon-checked, EzRadioIcon-unchecked
• EzRadioGroup
• EzFormLabel
• EzFormControlLabel, EzFormControlLabel-label, EzFormControlLabel-helperText
• EzSuperFormControlLabel, EzSuperFormControlLabel-radio, EzSuperFormControlLabel-checked, EzSuperFormControlLabel-label, EzSuperFormControlLabel-icon, EzSuperFormControlLabel-text

Accessibility

See WAI-ARIA accessibility guidelines for radio buttons.

All radio button form controls should have corresponding labels using ariaLabel (hidden) or EzFormControlLabel.

If a label isn't used (for example when using an icon-only super radio button), be sure to add an ariaLabel directly to EzRadio.

Props

Related components

• EzField
• EzCheckbox