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 | ||
| shape | shape of Segmented | default | round | default | 5.24.0 |
| name | The name property of all input[type="radio"] children. if not set, it will fallback to a randomly generated name | string | 5.23.0 |
| 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.
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.
Make it vertical.
Round shape of Segmented.
Controlled Segmented.
Load options dynamically.
Set icon for Segmented Item.
Passing the name property to all input[type="radio"] that are in the same Segmented. It is usually used to let the browser see your Segmented as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same Segmented.
