Segmented

Switch between related options.

Basic usage

Current view: Weekly

basic.tsx

import { Segmented, Space, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function SegmentedBasic() {
  const [value, setValue] = useState('Weekly');
  return (
    <Space direction="vertical" align="stretch">
      <Segmented options={['Daily', 'Weekly', 'Monthly']} value={value} onChange={setValue} />
      <output>
        <Text tone="muted">Current view: {value}</Text>
      </output>
    </Space>
  );
}

More examples

Fill container

Small size

advanced.tsx

import { Segmented, Space, Text } from '@ifhover/leaf-ui';

export function SegmentedOptions() {
  return (
    <Space direction="vertical" align="stretch">
      <Text tone="muted">Fill container</Text>
      <Segmented
        block
        options={[
          { value: 'list', label: 'List' },
          { value: 'grid', label: 'Grid' },
          { value: 'archived', label: 'Archive (unavailable', disabled: true },
        ]}
      />
      <Text tone="muted">Small size</Text>
      <Segmented size="sm" options={['A', 'B', 'C']} />
    </Space>
  );
}

Usage

The default width follows the content; block fills the container. options accepts strings or labeled options with icons. Control selection with value / onChange and switch options using arrow keys. Set name to include the value in native form submissions.

Types

Import these types for data, callbacks and refs.

import type { SegmentedOption, SegmentedProps } from '@ifhover/leaf-ui';

SegmentedOption API

Property	Type	Default	Description
`value`	`string`	Required	Controlled value
`label`	`ReactNode`	Required	Display label
`icon`	`ReactNode`	—	Custom icon
`disabled`	`boolean`	—	Disable interactions

SegmentedProps API

Property	Type	Default	Description
`options`	`readonly (string \| SegmentedOption)[]`	Required	Available options
`value`	`string`	—	Controlled value
`defaultValue`	`string`	—	Initial value, restored by uncontrolled form resets
`onChange`	`(value: string) => void`	—	Value change callback
`disabled`	`boolean`	—	Disable interactions
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size or spacing preset
`block`	`boolean`	`false`	Fill container width
`name`	`string`	—	Form field name
`form`	`string`	—	Associated form ID

#Segmented

#Basic usage

#More examples

#Usage

#Types

#SegmentedOption API