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

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

API#

nz-segmentedcomponent#

Property	Description	Type	Default	Global Config
`[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`	-
`[nzVertical]`	Orientation	`boolean`	`false`	-
`[nzName]`	The name property of all `input[type="radio"]` children	`string`	-
`[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`