Segmented

One of a few options side by side in one sunken track, the picked one lifted out of it. It suits two to four short options that change what a view shows.

import { Segmented } from '@basmilius/react-ui';

import { useState } from 'react';
import { Columns2, LayoutGrid, List } from 'lucide-react';
import { Segmented } from '@basmilius/react-ui';

type View = 'list' | 'grid' | 'split';

export default function SegmentedDemo() {
    const [view, setView] = useState<View>('list');

    return (
        <Segmented<View>
            label="View"
            value={view}
            onValueChange={setView}
            options={[
                { id: 'list', label: 'List', icon: List },
                { id: 'grid', label: 'Grid', icon: LayoutGrid },
                { id: 'split', label: 'Split', icon: Columns2 }
            ]}
        />
    );
}

The track is a radiogroup and every option a radio, with aria-checked on the picked one. Each option is its own button in the tab order.

Props

Prop	Type
value	T	Required.
onValueChange	(id: T) => void	Required.
options	readonly SegmentedOption<T>[]	Required. { id, label, icon? }, with a Lucide icon drawn at 14 pixels.
label	string	Required. The accessible name of the group.
disabled	boolean
className	string
ref	Ref<HTMLDivElement>

SegmentedProps and SegmentedOption are exported types.