Skip to main content
Contact us

Radio

Radios allow users to select only one option from a group of two or more options.

Figma

Storybook

Anatomy

The radio component is made up of four elements.

  1. Radio input
  2. Helper text
  3. Status mark
  4. Label

Variants

Label

Labels are not required if an adjacent label is included that adequately describes the purpose of the radio and is correctly referenced to the field for accessibility purposes

Helper text

Helper text can be included alongside the label to provide additional context or guidance for using the control. The helper text wraps to the next line once it reaches the width of the container.

Behavior

Text flow

When labels wrap to multiple lines, the first line of the text should remain vertically centered with the control. Secondary text should simply wrap to the next line.

States

Radios can be either unselected or selected. Each of those statuses has five states:

  1. Enabled
  2. Focus
  3. Hover
  4. Active
  5. Disabled
Unselected
The unselected radio includes enabled, focus, hover, active, disabled, and pending states.
Selected
The selected radio includes enabled, focus, hover, active, disabled, and pending states.

Component tokens

The following component tokens are available for customizing the radio component.

Sample references including the swatch and computed values currently represent the applied light theme.

The token lists can be copied into tabular format for pasting into spreadsheets or other applications. Use these to help you document product-specific customizations or perform fine-grained filters.

Color

  • jh-radio-input-color-background-unselected-enabled
    The unselected radio background color.
    Default value
    jh-color-container-primary-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-radio-input-color-background-unselected-focus
    The background color of the unselected radio when focused.
    Default value
    jh-color-container-primary-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-radio-input-color-background-unselected-hover
    The background color of the unselected radio when hovered.
    Default value
    jh-color-container-primary-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-radio-input-color-background-unselected-active
    The background color of the unselected radio when active.
    Default value
    jh-color-container-primary-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-radio-input-color-background-unselected-disabled
    The background color of the unselected radio when disabled.
    Default value
    jh-color-container-primary-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-radio-input-color-background-selected-enabled
    The background color of the selected radio.
    Default value
    jh-color-container-primary-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-radio-input-color-background-selected-focus
    The background color of the selected radio when focused.
    Default value
    jh-color-container-primary-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-radio-input-color-background-selected-hover
    The background color of the selected radio when hovered.
    Default value
    jh-color-container-primary-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-radio-input-color-background-selected-active
    The background color of the selected radio when active.
    Default value
    jh-color-container-primary-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-radio-input-color-background-selected-disabled
    The background color of the selected radio when disabled.
    Default value
    jh-color-container-primary-enabled
    Computed value
    rgb(255, 255, 255)
  • jh-radio-input-color-border-unselected-enabled
    The unselected radio border color.
    Default value
    jh-color-divider-primary
    Computed value
    rgb(112, 117, 122)
  • jh-radio-input-color-border-unselected-focus
    The border color of the unselected radio when focused.
    Default value
    jh-color-content-brand-hover
    Computed value
    rgb(38, 79, 213)
  • jh-radio-input-color-border-unselected-hover
    The border color of the unselected radio when hovered.
    Default value
    jh-color-content-brand-hover
    Computed value
    rgb(38, 79, 213)
  • jh-radio-input-color-border-unselected-active
    The border color of the unselected radio when active.
    Default value
    jh-color-content-brand-active
    Computed value
    rgb(51, 67, 196)
  • jh-radio-input-color-border-unselected-disabled
    The border color of the unselected radio when disabled.
    Default value
    jh-color-divider-primary
    Computed value
    rgb(112, 117, 122)
  • jh-radio-input-color-border-selected-enabled
    The border color of the selected radio.
    Default value
    jh-color-content-brand-enabled
    Computed value
    rgb(8, 92, 229)
  • jh-radio-input-color-border-selected-focus
    The border color of the selected radio when focused.
    Default value
    jh-color-content-brand-hover
    Computed value
    rgb(38, 79, 213)
  • jh-radio-input-color-border-selected-hover
    The border color of the selected radio when hovered.
    Default value
    jh-color-content-brand-hover
    Computed value
    rgb(38, 79, 213)
  • jh-radio-input-color-border-selected-active
    The border color of the selected radio when active.
    Default value
    jh-color-content-brand-active
    Computed value
    rgb(51, 67, 196)
  • jh-radio-input-color-border-selected-disabled
    The border color of the selected radio when disabled.
    Default value
    jh-color-content-brand-enabled
    Computed value
    rgb(8, 92, 229)
  • jh-radio-status-color-background-selected-enabled
    The color of the selected status mark.
    Default value
    jh-color-content-brand-enabled
    Computed value
    rgb(8, 92, 229)
  • jh-radio-status-color-background-selected-focus
    The color of the selected status mark when focused.
    Default value
    jh-color-content-brand-hover
    Computed value
    rgb(38, 79, 213)
  • jh-radio-status-color-background-selected-hover
    The color of the selected status mark when hovered.
    Default value
    jh-color-content-brand-hover
    Computed value
    rgb(38, 79, 213)
  • jh-radio-status-color-background-selected-active
    The color of the selected status mark when active.
    Default value
    jh-color-content-brand-active
    Computed value
    rgb(51, 67, 196)
  • jh-radio-status-color-background-selected-disabled
    The color of the selected status mark when disabled.
    Default value
    jh-color-content-brand-enabled
    Computed value
    rgb(8, 92, 229)
  • jh-radio-label-color-text
    The label text color.
    Default value
    jh-color-content-primary-enabled
    Computed value
    rgb(42, 44, 46)
  • jh-radio-helper-color-text
    The helper text color.
    Default value
    jh-color-content-secondary-enabled
    Computed value
    rgb(95, 100, 104)

Opacity

  • jh-radio-opacity-disabled
    The radio opacity when disabled.
    Default value
    jh-opacity-disabled
    Computed value
    0.3

Border

  • jh-radio-input-border-radius
    The border radius of the radio and the status mark.
    Default value
    jh-border-radius-circle
    Computed value
    50%

Shadow

  • jh-radio-input-shadow-focus
    The radio box shadow when focused.
    Default value
    jh-shadow-focus
    Computed value
    0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgb(8, 92, 229)