Segment

A sliding segmented control for mutually exclusive choices.

When to use

Use Segment when you need a sliding segmented control for mutually exclusive choices.

Import

TypeScript

import { Segment } from '@gzodo/ui'

Segment is a compact switcher: one selected value, a sliding thumb, and Segment.Item children. Use it for theme, view mode, or short ranges. Prefer ButtonGroup when each option should look like a full button.

Examples

Basic

Controlled value and onChange. The thumb moves to the active item.

Three options

Any number of items works. The thumb width follows the count.

Sizes

size is sm, md, lg, or xl.

Full width

fullWidth stretches the control and shares space equally.

Segment

Property

Description

Type

Default

value

Selected item value.

string

—

onChange

Called when an item is chosen.

(value: string) => void

—

size

Item height and type size.

'sm' | 'md' | 'lg' | 'xl'

'md'

fullWidth

Stretch to the parent width.

boolean

false

aria-label

Accessible name for the group.

string

—

className

Class on the root.

string

—

children

Segment.Item elements.

ReactNode

—

Segment.Item

Property

Description

Type

Default

value

Value reported through onChange.

string

—

children

Label, icon, or both.

ReactNode

—

disabled

Blocks selection.

boolean

false

className

Class on the item button.

string

—

ButtonGroup

IconButton