Segmented
Segmented
Display multiple options and allow users to select a single option.
Importimport{ Segmented }from"antd"; |
Sourcecomponents/segmented |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Importimport{ Segmented }from"antd"; |
Sourcecomponents/segmented |
This component is available since antd@4.20.0.
Common props ref：Common props
This component is available since
antd@4.20.0
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| block | Option to fit width to its parent's width | boolean | false | |
| defaultValue | Default selected value | string | number | ||
| disabled | Disable all segments | boolean | false | |
| onChange | The callback function that is triggered when the state changes | function(value: string | number) | ||
| options | Set children optional | string[] | number[] | SegmentedItemType[] | [] | |
| size | The size of the Segmented. | large | middle | small | middle | |
| vertical | Orientation | boolean | false | 5.21.0 |
| value | Currently selected value | string | number |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| label | Display text for Segmented item | ReactNode | - | |
| value | Value for Segmented item | string | number | - | |
| icon | Display icon for Segmented item | ReactNode | - | |
| disabled | Disabled state of segmented item | boolean | false | |
| className | The additional css class | string | - |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| itemActiveBg | Background color of item when active | string | rgba(0, 0, 0, 0.15) |
| itemColor | Text color of item | string | rgba(0, 0, 0, 0.65) |
| itemHoverBg | Background color of item when hover | string | rgba(0, 0, 0, 0.06) |
| itemHoverColor | Text color of item when hover | string | rgba(0, 0, 0, 0.88) |
| itemSelectedBg | Background color of item when selected | string | #ffffff |
| itemSelectedColor | Text color of item when selected | string | rgba(0, 0, 0, 0.88) |
| trackBg | Background of Segmented container | string | #f5f5f5 |
| trackPadding | Padding of Segmented container | string | number | 2 |
The most basic usage.
block property will make the Segmented fit to its parent width.
Controlled Segmented.
Load options dynamically.
Set icon for Segmented Item.
Tests two Segmented synchronized states in controlled mode.
Custom component token.
Make it vertical.
Disabled Segmented.
Custom each Segmented Item by ReactNode.
There are three sizes of an Segmented: large (40px), default (32px) and small (24px).
Set icon without label for Segmented Item.
Keep consistent height with other components.
