Tabler React 2 Docs
Segmented Control
Segmented Control
Segmented controls allow a user to select a value from a set of options.
Signature
import { SegmentedControl } from "tabler-react-2";
<SegmentedControl {...props} />;Props
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
value | No | String or Number | The value of the selected option. | |
onChange | No | function (called with object) | A function that fires when the user selects a new option. | |
items | Yes | Array of SegmentedControlItems | An array of options to be displayed in the segmented control. | |
vertical | No | Boolean | false | Whether the segmented control should be displayed vertically. |
size | No | String [sm | lg] | The size of the segmented control. | |
className | No | String | A class name to be added to the segmented control. | |
buttonClassName | No | String | A class name to be added to the segmented control buttons. | |
style | No | Object | A style object to be added to the segmented control. | |
buttonStyle | No | Object | A style object to be added to the segmented control buttons. |
Basic Usage
The SegmentedControl component is used to display a segmented control.
<SegmentedControl value="one" onChange={(v) => alert(`Selected ${v.label}`)} items={[ { id: "one", label: "One" }, { id: "two", label: "Two" }, { id: "three", label: "Three" }, ]}/>Segmented Control Items
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
id | Yes | String | The value of the option. | |
label | Yes | String | The label of the option. | |
icon | No | React.ReactNode | An icon to be displayed in the segmented control. | |
disabled | No | Boolean | false | Whether the option should be disabled. |
className | No | String | A class name to be added to the segmented control option. | |
style | No | Object | A style object to be added to the segmented control option. |