Passing the nzName property to all input[type="radio"] that are in the same nz-segmented. It is usually used to let the browser see your nz-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.

      Loading...

Vertical direction

Make it vertical.

      Loading...

20.2.0

Three sizes of Segmented

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

      Loading...

With Icon only

Set icon without label for Segmented Item.

      Loading...

20.3.0

API#

nz-segmentedcomponent#

Property	Description	Type	Default	Global Config	Version
`[nzBlock]`	Option to fit width to its parent's width	`boolean`	`false`
`[nzDisabled]`	Disable all segments	`boolean`	`false`
`[nzOptions]`	Set children optional	`string[] \| number[] \| Array<{ label: string; value: string \| number; icon: string; disabled?: boolean }>`	-
`[nzSize]`	The size of the Segmented	`large \| default \| small`	-	✅
`[nzShape]`	Shape of Segmented	`default \| round`	`default`	-	20.3.0
`[nzVertical]`	Orientation	`boolean`	`false`	-	20.2.0
`[nzName]`	The name property of all `input[type="radio"]` children	`string`	-		20.3.0
`[ngModel]`	Value of the currently selected option	`string \| number`	-
`(nzValueChange)`	Emits when value of the currently selected option changes	`EventEmitter<string \| number>`	-
`(ngModelChange)`	Emits when value of the currently selected option changes	`EventEmitter<string \| number>`	-

label[nz-segmented-item]#

Property	Description	Type	Default
`[nzIcon]`	Icon in segmented item	`string`	-
`[nzValue]`	Value of segmented item	`string \| number`	-
`[nzDisabled]`	Disable the segmented item	`boolean`	`false`