Segmented

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

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

The most basic usage.

Block Segmented

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

Disabled

Disabled Segmented.

Custom Render

Custom each Segmented Item.

Three sizes of Segmented

There are three sizes of a Segmented component: large (40px), medium (32px), and small (24px).

With Icon only

Set icon without label for Segmented Item.

Custom semantic dom styling

You can customize the semantic dom style of the Segmented by passing objects/functions through classNames and styles.

Vertical Direction

Make it vertical.

Round shape

Round shape of Segmented.

Controlled mode

Controlled Segmented.

Dynamic

Load options dynamically.

With Icon

Set icon for Segmented Item. icon also accepts a bare <svg> element from a third-party icon library, which stays vertically centred with the label.

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.

API

Segmented are exported from @ceebee/ui/client.

Segmented

Property	Description	Type	Default	Version
`block`	Option to fit width to its parent\'s width	`boolean`	`false`	—
`classNames`	Customize class for each semantic structure inside the Segmented component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props }) => Record<SemanticDOM, string>`	`-`	—
`defaultValue`	Default selected value	`string \| number`	`Value of first item in options`	—
`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\[]`	`[]`	—
`orientation`	Orientation	`horizontal \| vertical`	`horizontal`	—
`size`	The size of the Segmented.	`large \| medium \| small`	`medium`	—
`styles`	Customize inline style for each semantic structure inside the Segmented component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props }) => Record<SemanticDOM, CSSProperties>`	`-`	—
`vertical`	Orientation. Simultaneously existing with orientation, orientation takes priority	`boolean`	`false`	5.21.0
`value`	Currently selected value	`string \| number`	`—`	—
`shape`	shape of Segmented	`default \| round`	`default`	5.24.0
`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	Version
`disabled`	Disabled state of segmented item	`boolean`	`false`	—
`className`	The additional css class	`string`	`-`	—
`icon`	Display icon for Segmented item	`ReactNode`	`-`	—
`label`	Display text for Segmented item	`ReactNode`	`-`	—
`tooltip`	tooltip for Segmented item	`string \| TooltipProps`	`-`	—
`value`	Value for Segmented item	`string \| number`	`-`	—