ant-design/components/segmented/index.en-US.md

category	group	title	description	cover	coverDark	demo
Components	Data Display	Segmented	Display multiple options and allow users to select a single option.	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*XJR2TbS1aaQAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-9tSSoO_MkIAAAAAAAAAAAAADrJ8AQ/original	cols 2

This component is available since antd@4.20.0.

When To Use

• When displaying multiple options and user can select a single option;
• When switching the selected option, the content of the associated area changes.

Examples

Basic Vertical Direction Block Segmented Disabled Controlled mode Custom Render Dynamic Three sizes of Segmented With Icon With Icon only Controlled Synced mode Consistent height Custom component token

API

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

SegmentedItemType

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	-

Design Token