Skip to main content

Radio

A form control that provides a list of options which are all visible.

Installation​

Install

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

Import

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

Accessibility​

Accessibility documentation(opens in new window)

Default​

Disabled​

Error​

Example with additional content​

Alert warningHandle with care!
Overloading a Radio label is a serious accessibility issue. If unsure test, using Voiceover on Mac for example, without looking at the screen and imagine trying to comprehend/remember what each option is.

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 }
  • value
    stringThe input value

CSS Variables​