Skip to main content

Radio Block

Component
Live

The Radio Block component provides users with block-styled, visual options which are individually selectable.

FigmaCode

Usage​

The Radio Block provides users with block-styled, visual options, from which only one selection can be made. Radio blocks expands the clickable area in comparison to standard Radio component and can contain icons. The visual styling enhances usability with its larger clickable area and obvious selected style, especially on mobile interfaces.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { RadioBlock } from "@iag/chroma-react-ui.components";

When to use​

Use Radio Blocks when you need to present a set of mutually exclusive options with larger clickable areas. Also where including icons would assist greater with user understanding.

When to avoid​

Avoid using Radio Blocks for multiple selections or if options exceed 6. If multiple options can be selected, consider the Checkbox component. If there are more than 6 options, consider the Select component instead.

Do

  • Do provide at least 2 choices, no more than 6.
  • Do ensure the iconography is immediately understood by users.
  • Do use simple labels for easy scanning.
  • Do use Legends on Radio Block groups to provide context to the user.
  • Do provide help text for additional context where critical.
  • Do use informative error messages for easier correction.

Don't

  • Don't end a Radio Block label with punctuation.
  • Don't add large amounts of text to the Legend.

Touch Area and Usability​

The Radio Block's design enhances usability by increasing the clickable area, making it more user friendly on mobile interfaces.

Layout Options​

Radio Block can be presented in a column-based layout or inline depending on the interface requirements.