Segmented Control

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/segmented-control

NPM

npm install @leafygreen-ui/segmented-control

Example

import {
  SegmentedControl,
  SegmentedControlOption,
} from '@leafygreen-ui/segmented-control';

<SegmentedControl
  name="fruit"
  size={'default'}
  darkMode={false}
  followFocus={true}
  defaultValue={carrot}
  onChange={(value: string) => {
    console.log(value);
  }}
>
  <SegmentedControlOption value="apple">Apple</SegmentedControlOption>

  <SegmentedControlOption value="banana">Banana</SegmentedControlOption>

  <SegmentedControlOption value="carrot">Carrot</SegmentedControlOption>

  <SegmentedControlOption value="dragonfruit" disabled>
    Dragonfruit
  </SegmentedControlOption>
</SegmentedControl>;

Output HTML

<div>
  <div
    role="tablist"
    aria-label="fruit"
    aria-owns="fruit-0 fruit-1 fruit-2 fruit-3"
  >
    <div data-lg-checked="true">
      <div>
        <div tabindex="-1">
          <button role="tab" id="fruit-0" tabindex="0" aria-selected="true">
            <span>Apple</span>
          </button>
        </div>
        <div data-leafygreen-ui="interaction-ring"></div>
      </div>
    </div>
    <div data-lg-checked="false">
      <div>
        <div tabindex="-1">
          <button role="tab" id="fruit-1" tabindex="-1" aria-selected="false">
            <span>Banana</span>
          </button>
        </div>
        <div data-leafygreen-ui="interaction-ring"></div>
      </div>
    </div>
    <div data-lg-checked="false">
      <div>
        <div tabindex="-1">
          <button role="tab" id="fruit-2" tabindex="-1" aria-selected="false">
            <span>Carrot</span>
          </button>
        </div>
        <div data-leafygreen-ui="interaction-ring"></div>
      </div>
    </div>
    <div data-lg-checked="false">
      <div>
        <div tabindex="-1">
          <button
            role="tab"
            id="fruit-3"
            tabindex="-1"
            aria-selected="false"
            disabled=""
          >
            <span>Dragonfruit</span>
          </button>
        </div>
        <div data-leafygreen-ui="interaction-ring"></div>
      </div>
    </div>
    <div data-leafygreen-ui="selection-indicator"></div>
    <div data-leafygreen-ui="hover-indicator"></div>
  </div>
</div>

Props

| Prop | Type | Description | Default | | ----------------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | | children | React.ReactNode | Children must be SegmentedControlOptions | null | | size | xsmall / default / large | Defines the size of the segmented control. | default | | darkMode | boolean | Toggles dark mode | false | | defaultValue | string | Defines the default, or initial value of the component. Ignored if value is also provided. | '' | | value | string | Controls the value of the component. If provided, you must update the value in the onChange method, or other user actions (such as routing) | | | label | string | A text label to the left of the segmented control. Sets the name prop if none is provided. | | | name | string | Identifies the segmented control group to screen readers. Auto-generated if no name or label is provided. It's recommended for accessability to set this to a meaningful value for accessibility. | | | followFocus | boolean | Defines whether the selection should automatically follow focus. If set to true, the arrow keys can be used to switch selection, otherwise a keyboard user will need to press enter to make a selection. | true | | 'aria-controls' | string | An id ref that identifies the element(s) whose contents/presence is controlled by the segmented control. Required as a prop on the control, or on each individual option. | | | className | string | Adds a className to the outermost element. | | | onChange | (value: string) => void | Callback that gets called when a user makes a new selection. | |

SegmentedControlOption

Props

| Prop | Type | Description | Default | | ----------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | | children | React.ReactNode | Should be text. | | | value | string | Required. The value of the option. | | | glyph | React.ReactElement | The icon to display to the left of the option. | | | disabled | boolean | Toggles whether the option is disabled. | false | | as | string | Render the option wrapped in another component. Typically used for router Link components. | 'div' | | 'aria-controls' | string | An id ref that identifies the element(s) whose contents/presence is controlled by the segmented control. Required as a prop on the control, or on each individual option. | | | className | string | Adds a className to the outermost element. | | | _id | string | Internal. A unique identifier for the option | ${name}-${index} | | _checked | boolean | Internal. Identifies whether the option is checked. | | | _focused | boolean | Internal. Identifies whether the option has focus | | | _index | number | Internal. The index of the option | | | _onClick | (value: string) => void | Internal. Calls the onChange callback | | | _onHover | (hovered: boolean) => void | Internal. Fires on mouse in and out | |