Importimport { Segmented } from 'antd';
Docs
contributors
- Components Overview
- Changelogv6.1.4
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
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 | |
| classNames | Customize class for each semantic structure inside the Segmented component. Supports object or function. | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | |
| 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[] | [] | |
| orientation | Orientation | horizontal | vertical | horizontal | |
| size | The size of the Segmented. | large | middle | small | middle | |
| styles | Customize inline style for each semantic structure inside the Segmented component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | |
| vertical | Orientation,Simultaneously existing with orientation, orientation takes priority | 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 |
|---|---|---|---|---|
| disabled | Disabled state of segmented item | boolean | false | |
| className | The additional css class | string | - | |
| icon | Display icon for Segmented item | ReactNode | - | |
| label | Display text for Segmented item | ReactNode | - | |
| tooltip | tooltip for Segmented item | string | TooltipProps | - | |
| value | Value for Segmented item | string | number | - |
| 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.
There are three sizes of an Segmented: large (40px), default (32px) and small (24px).
Set icon without label for Segmented Item.
You can customize the semantic dom style of the Segmented by passing objects/functions through classNames and styles.
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.
