#StandWithUkraine

RadioInputGroup

Open in Storybook Open in Figma

Like Checkboxes, radio buttons in one line have to be set individually in their own .col-* in a .row. Radio buttons that are always below each other share the same .col-*.

WIP The single-column example below is perfectly fine, but an active discussion is ongoing whether we should discontinue using radios in a 2-column setup or not. Please consult the Design Team if you run into the challenge of creating or refactoring something like the 2-column example below. A solution will be provided as soon as the Form section gets updated.

Loading demo…
Loading demo…
Rules For Designers
  • Radio buttons are left-aligned. There is 20px vertical spacing between them.