Skip to main content

Checkbox

Allows the user to select from a list of options.

Installation​

Install

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

Import

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

Accessibility​

Accessibility Documentation(opens in new window)

Default​

Disabled​

Error​

Inline​

Example with additional information​

Alert warningHandle with care!
Overloading a Checkbox 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.
Also be aware that most assistive technologies will truncate labels at a given length. The default in NVDA is 100 characters so this should be the target as a maximum character length.

Properties​

Name
Description
  • className
    stringAdditional CSS classes to be applied
  • error
    booleanIndicates whether there's an error state
  • id
    stringHTML id attribute for the component
  • name
    stringHTML Name attribute for the Checkbox inputs
  • onChange
    (event: ChangeEvent<HTMLInputElement>, value: string[]) => voidCallback for onChange event
  • options*
    IOptions[]List of options for the Checkbox
  • value*
    string[]Selected values in the Checkbox
  • variant
    "inline" | "block"Display variant: inline or block

CSS Variables​