Segmented

Base UI-powered Segmented control — toggle-group semantics with a sliding active indicator. Drops antd dependency in favor of @base-ui/react/toggle-group.

import { Segmented } from '@lobehub/ui/base-ui';

NPM Source Edit

Data Entry

Default

Loading preview

Atom Components

Loading preview

APIs

Segmented

Segmented properties

block: boolean
Defaults to false.
className: string
classNames: SegmentedClassNames
defaultValue: Value
disabled: boolean
Defaults to false.
glass: boolean
Defaults to false.
id: string
name: string
onChange: (value: Value) => void
options: SegmentedOptions<Value>
ref: null | (instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES] | RefObject<HTMLDivElement | null>
shadow: boolean
Defaults to false.
size: 'small' | 'middle' | 'large'
Defaults to "middle".
style: CSSProperties
styles: SegmentedStyles
value: Value
variant: 'outlined' | 'filled'
Defaults to "filled".
vertical: boolean
Defaults to false.

SegmentedOption

Property	Description	Type	Default
value	Unique value	`string`	-
label	Option label	`ReactNode`	-
icon	Leading icon	`ReactNode`	-
disabled	Whether the item is disabled	`boolean`	`false`
title	Native title attribute	`string`	-

options also accepts an array of plain strings as shorthand: ['Light', 'Dark'] is equivalent to [{ value: 'Light', label: 'Light' }, ...].