Skip to main content

Radio Block

Enables users to pick exactly one option from a group.

Structure​

  • Radio Controller: Indicates the state and can be selected or not.
  • Label: Describes the option being selected.
  • Icon (optional): Supports or directly communicates the text.
  • Info Text: Adds more explanation to the label. Can contain a link.
Fixed, full or part time

Employees on a repeating working time pattern who work fixed, predictable numbers of hours every week and have a fixed leave entitlement.

Short hours or variable

Employees on a contract who work a different number of hours or days from week to week.

Radio Block

Guidelines​

When to use​

  • To present a few options where only one can be selected.

When not to use​

  • When you have many options - use a Select.
  • When multiple options can be selected - use a Checkbox.
  • For single on/off settings with an instant response - use a switch.

Regular vs Radio button styling​

  • Prefer regular radios where there are many controls in a form, or where space is limited. If in doubt, use regular radio buttons.
  • Consider button-styling in more guided experiences (such as wizards) where there are few choices/controls on the form, and a more visually engaging experience may aid completion.
Supporting icons​

Radio blocks support optional icons to aid comprehension. Icons should be used to support the text, not replace it. Icons should be used consistently across the product.

First choice

Contrary to popular belief, Lorem Ipsum is not simply random text.

Second choice

Contrary to popular belief, Lorem Ipsum is not simply random text.

Radio Blocks with icons

Alignment​

Radio blocks can be aligned both left and centered. Left aligned is the default.

First choice
Contrary to popular belief, Lorem Ipsum is not simply random text.
Second choice
Contrary to popular belief, Lorem Ipsum is not simply random text.

Center aligned Radio Blocks