SegmentedControl

Toggle buttons for switching between different values or views.

Want to skip the docs? Try our MCP Server

#
Documentation

#
Usage

Use SegmentedControl and SegmentedControlItem components together to create sets of toggle buttons.

SegmentedControlItem extends the Button component.


import { IconGrid, IconRectangleList } from "@optiaxiom/icons";
import {
  SegmentedControl,
  SegmentedControlItem,
  Tooltip,
} from "@optiaxiom/react";
 
export function App() {
  return (
    <SegmentedControl defaultValue="list">
      <Tooltip content="List">
        <SegmentedControlItem
          aria-label="List"
          icon={<IconRectangleList />}
          value="list"
        />
      </Tooltip>
 
      <Tooltip content="Grid">
        <SegmentedControlItem
          aria-label="Grid"
          icon={<IconGrid />}
          value="grid"
        />
      </Tooltip>
    </SegmentedControl>
  );
}

#
Anatomy


import { SegmentedControl, SegmentedControlItem } from "@optiaxiom/react";
 
export default () => (
  <SegmentedControl>
    <SegmentedControlItem />
  </SegmentedControl>
);

#
Controlled

Use the value and defaultValue props to toggle between controlled and uncontrolled usage. And combine it with onValueChange to listen for changes to the state.

In single mode, clicking the active item deselects it and calls onValueChange with an empty string. To keep one item always active, as in a view switcher, ignore empty values in onValueChange.


"use client";
 
import { IconDesktop, IconMobile, IconTablet } from "@optiaxiom/icons";
import {
  Button,
  Group,
  SegmentedControl,
  SegmentedControlItem,
  Tooltip,
} from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState("desktop");
 
  return (
    <Group gap="16">
      <SegmentedControl
        onValueChange={(value: string) => value && setValue(value)}
        value={value}
      >
        <Tooltip content="Desktop">
          <SegmentedControlItem
            aria-label="Desktop"
            icon={<IconDesktop />}
            key="desktop"
            value="desktop"
          />
        </Tooltip>
        <Tooltip content="Tablet">
          <SegmentedControlItem
            aria-label="Tablet"
            icon={<IconTablet />}
            key="tablet"
            value="tablet"
          />
        </Tooltip>
        <Tooltip content="Mobile">
          <SegmentedControlItem
            aria-label="Mobile"
            icon={<IconMobile />}
            key="mobile"
            value="mobile"
          />
        </Tooltip>
      </SegmentedControl>
      <Button
        disabled={value === "desktop"}
        onClick={() => setValue("desktop")}
      >
        Reset
      </Button>
    </Group>
  );
}

Button

Button component is used to trigger actions.

ToggleButton

ToggleButton component represents a button that can be toggled on or off.

Tabs

Organize content into multiple sections with horizontal navigation.

#
Props

#
SegmentedControl


import { SegmentedControl } from "@optiaxiom/react";
// or
import { SegmentedControl } from "@optiaxiom/react/segmented-control";

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`children` `ReactNode`
`className` `string`
`defaultValue` The value of the item that is pressed when initially rendered. Use `defaultValue` if you do not need to control the state of a toggle group. The value of the items that are pressed when initially rendered. Use `defaultValue` if you do not need to control the state of a toggle group. `string \| string[]`
`dir` `"ltr" \| "rtl"`
`disabled` Whether the group is disabled from user interaction. @defaultValue false `false \| true`
`loop` `false \| true`
`onValueChange` The callback that fires when the value of the toggle group changes. The callback that fires when the state of the toggle group changes. `(value: string) => void \| (value: string[]) => void`
`orientation` `"horizontal" \| "vertical"`
`rovingFocus` Whether the group should maintain roving focus of its buttons. @defaultValue true `false \| true`
`type` Whether to allow multiple values or only activate one item at a time. In `single` mode, clicking the active item deselects it and calls `onValueChange` with `""`. To keep one item always active, control `value` and ignore empty values: `onValueChange={(value: string) => value && setValue(value)}`. `"multiple" \| "single"` Default: `single`
`value` The controlled stateful value of the item that is pressed. The controlled stateful value of the items that are pressed. `string \| string[]`

#
SegmentedControlItem


import { SegmentedControlItem } from "@optiaxiom/react";
// or
import { SegmentedControlItem } from "@optiaxiom/react/segmented-control";

Supports all Button props in addition to its own. Renders a <button> element.

Prop
`addonAfter` Display content inside the button after `children`. `ReactNode`
`addonBefore` Display content inside the button before `children`. `ReactNode`
`appearance` Control the appearance by selecting between the different button types. `"default" \| "danger" \| "primary" \| "subtle" \| "danger-outline" \| "default-opal" \| "inverse" \| "primary-opal"`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`children` `ReactNode`
`className` `string`
`disabled` Whether the button is disabled. `false \| true`
`icon` Display an icon before or after the button content or omit `children` to only show the icon. `ReactNode`
`iconPosition` Control whether to show the icon before or after the button content. `"end" \| "start"`
`loading` Show a loading spinner and mark the button `aria-busy`. The button stays focusable and clickable: don’t also set `disabled`, which drops keyboard focus mid-action, and ignore repeat clicks in `onClick` if the action shouldn’t run twice. Nothing is announced when loading starts or ends, so tell screen reader users the outcome yourself, e.g. with a toast. `false \| true`
`size` Control the size of the button. `"sm" \| "md" \| "lg"`
`square` Whether button should have square shape (an icon-only button with no label). `false \| true`
`type` The default behavior of the button. `"button" \| "reset" \| "submit"`
`value*` A string value for the toggle group item. All items within a toggle group should use a unique value. `string`

#
Accessibility

#
Keyboard interactions

Key	Description
`Tab`	Moves focus to either the pressed item or the first item in the group.
`SpaceEnter`	Activates/deactivates the item.
`ArrowDownArrowRight`	Moves focus to the next item in the group.
`ArrowUpArrowLeft`	Moves focus to the previous item in the group.
`HomeEnd`	Moves focus to the first/last item.

#
Changelog

#
0.2.0

Added component