Radio Buttons

Radio buttons are used for selection of only one option from a group of values. In order to use radio buttons, you must have at least 2 values for the user to choose from.

Design System Guidelines

Standard Radio Buttons

Use when the values have longer text that requires a line for each value. To disable a radio button, provide a unique ID to its dds__form-check-input and include a script for this in the page settings > "Before <body> tag" section. Note that the disabled state will be seen when published but not in preview mode.

Standard Radio Buttons with Error State

Use when the values have longer text that requires a line for each value. Replace the Show/Hide Error State buttons with whatever element you want to trigger the error interactions. To disable a radio button, provide a unique ID to its dds__form-check-input and include a script for this in the page settings > "Before <body> tag" section. Note that the disabled state will be seen when published but not in preview mode.

Show Error State

Inline Radio Buttons

Use when the values are short enough to fit on one line, such as numbers. To disable a radio button, provide a unique ID to its dds__form-check-input and include a script for this in the page settings > "Before <body> tag" section. Note that the disabled state will be seen when published but not in preview mode.

Inline Radio Buttons with Error State

Use when the values are short enough to fit on one line, such as numbers. Replace the Show/Hide Error State buttons with whatever element you want to trigger the error interactions. To disable a radio button, provide a unique ID to its dds__form-check-input and include a script for this in the page settings > "Before <body> tag" section. Note that the disabled state will be seen when published but not in preview mode.

Show Error State

Radio Buttons Styled as Cards

Only the card title is required. Feel free to mix and match sub-elements (supporting text, marketing text and/or image).

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Marketing text

Supporting text

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.