Segments display a group of related options that allow user toggled on or off.
ButtonselectionType to multiple.disabled prop to.The plan for personal.
The plan for team
Talk to us for business plan.
| Prop | Description | Type | Default |
|---|---|---|---|
| defaultValue | Initial value for uncontrolled Segment | string[] | - |
| onChange | Callback when Segment value is changed | (segmentValue: string | string[]) => void | - |
| selectionType | Whether a single or multiple items can be selected at a time | 'single' | 'multiple' | 'single' |
| size | Size of all segment item. | 'lg' | 'md' | 'sm' | 'xs' | 'md' |
| value | Controlled value of the Segment item to activate | string[] | - |
| Prop | Description | Type | Default |
|---|---|---|---|
| children | Children of Segment item | ({active: boolean, disabled: boolean, value: string[], ref: string, onSegmentItemClick: () => void}) => ReactNode | ReactNode | - |
| disabled | Whether to disable Segment item | boolean | - |
| size | Size of the segment item. | 'lg' | 'md' | 'sm' | 'xs' | 'md' |
| value | An unique value for Segment item | string | - |