Skip to main content

Segmented Control

A linear set of 2-3 segments, each of which functions as a mutually exclusive button.

Installation​

Install

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

Import

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

Accessibility​

Accessibility documentation(opens in new window)

Guidelines​

Used to provide 2 to 3 choices with short label contents each using 1-2 words.

Default​

Disabled​

Valid​

Error​

Block​

This will display block level (stacked) for mobile devices only (xs). Apply the block prop when there are more than 2 selectable options as the component may visual break on smaller devices.

Properties​

Name
Description
  • className
    stringAdditional CSS classes to be applied
  • labelClassName
    stringAdditional CSS classes to be applied to the label
  • disabled
    booleanBoolean indicating if the input is disabled
  • error
    booleanBoolean indicating if the input is in an error state
  • valid
    booleanBoolean indicating if the input is in a valid state
  • id
    stringHTML id attribute for the Input
  • name*
    stringHTML name attribute for the input
  • onChange*
    (event: ChangeEvent<HTMLInputElement>, value: string) => voidFunction to be called when the input value changes
  • options*
    IOptions[]An Array of objects { label:string, value:string }
  • value
    stringThe input value
  • block
    booleanset a specific class to render the component stacked in Mobile

CSS Variables​