Segmented control

Basic usage

First, import the component.

import {SegmentedControl} from '@pleo-io/telescope'

Then use it like so:

<SegmentedControl
    options={[
        {value: 'apples', label: 'Apples'},
        {value: 'bananas', label: 'Bananas'},
    ]}
    value="bananas"
    onChange={() => {}}
/>

Controlled

SegmentedControl is a controlled component. Pass the selected option as value (or null for no selection) and update it from onChange, which receives the selected option's value. Pass a type argument to narrow the values.

type View = 'list' | 'grid'


const ViewSwitcher = () => {
    const [view, setView] = React.useState<View>('list')


    return (
        <SegmentedControl<View>
            options={[
                {value: 'list', label: 'List'},
                {value: 'grid', label: 'Grid'},
            ]}
            value={view}
            onChange={setView}
        />
    )
}

Full width

Use fullWidth to stretch the control and share the width equally between options.

<SegmentedControl
    options={[
        {value: 'apples', label: 'Apples'},
        {value: 'bananas', label: 'Bananas'},
    ]}
    value="apples"
    onChange={() => {}}
    fullWidth
/>

Accessibility

Each option renders a native radio input with an associated label, grouped by name (generated when not passed). The selection animation is skipped when the user prefers reduced motion, or when disableAnimation is set.

API reference