@leafygreen-ui/segmented-control
v10.0.5
Published
leafyGreen UI Kit Segmented Control
Downloads
275,891
Keywords
Readme
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' \| 'small' \| '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 | |