Segmented - Namu Design

Segmented Controls. 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

The most basic usage.

Disabled Segmented.

Custom each Segmented Item by ReactNode.

Three sizes of Segmented

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

Set icon without label for Segmented Item.

Block Segmented

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

Controlled mode

Controlled Segmented.

Load options dynamically.

Set icon for Segmented Item.

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[] \| Array<{ label: ReactNode value: string icon? ReactNode disabled?: boolean className?: string }>	[]
size	The size of the Segmented.	`large` \| `middle` \| `small`	`middle`
value	Currently selected value	string \| number

Design Token

Component Token

Global Token