Segment
Segments display a group of related options that allow user toggled on or off.
Basic
Basic usage of Segment.
Size
Segment have exact size variation as
ButtonMultiple Selection
Segment support multiple selaction, by setting
selectionType to multiple.Disabled
Make Segment Item inactive by adding the
disabled prop to.Custom Segment
Segment Item allow us to render prop as children to create a more custom look options.
Personal
The plan for personal.
Team
The plan for team
Business
Talk to us for business plan.
Controlled
Some example of controlled Segment.
Single Selection
Multiple Selection
API
Segment
| 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[] | - |
Segment.Item
| 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 | - |