Skip to main content

Radio Block

Displays as a series of large buttons with icons.

Installation​

Install

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

Import

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

Accessibility​

Accessibility documentation(opens in new window)

Default​

Radio blocks are displayed as block level when no cols prop is added.

Inline​

Displays radio buttons inline. Set variant="inline".

Columns​

Available column options are 2, 3, 4, 5 and 6 via the cols prop.

Error​

Disabled​

Example with icons​

Properties​

Name
Description
  • className
    stringAdditional CSS classes to be applied
  • disabled
    booleanBoolean indicating if the input is disabled
  • error
    booleanBoolean indicating if the input is in an error state
  • id
    stringHTML id attribute for the Input
  • name
    stringHTML name attribute for the input
  • onChange
    (event: ChangeEvent<HTMLInputElement>) => voidFunction to be called when the input value changes
  • options*
    IOptions[]Array of { label:string, value: string, disabled?: boolean, icon?: ReactNode }
  • value
    stringThe input value
  • cols
    2 | 3 | 4 | 5 | 6Number of columns to display
  • variant
    "inline"The type of radio block

CSS Variables​