Ant Design

⌘ K

5.23.3

Segmented

Display multiple options and allow users to select a single option.

Importimport{ Segmented }from"antd";

Sourcecomponents/segmented

Docs

Edit this page Changelog

Ant Design

⌘ K

5.23.3

Segmented

Display multiple options and allow users to select a single option.

Importimport{ Segmented }from"antd";

Sourcecomponents/segmented

Docs

Edit this page Changelog

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

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
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

SegmentedItemType

Property	Description	Type	Default
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

Component TokenHow to use?

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

Global TokenHow to use?

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

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
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

SegmentedItemType

Property	Description	Type	Default
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

Component TokenHow to use?

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

Global TokenHow to use?

Basic

The most basic usage.

Block Segmented

block property will make the Segmented fit to its parent width.

Controlled mode

Controlled Segmented.

Dynamic

Load options dynamically.

With Icon

Set icon for Segmented Item.

With name

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.

5.23.0

Vertical Direction

Make it vertical.

5.21.0

Disabled

Disabled Segmented.

Custom Render

Custom each Segmented Item by ReactNode.

Three sizes of Segmented

There are three sizes of an Segmented: large (40px), default (32px) and small (24px).

With Icon only

Set icon without label for Segmented Item.