SegmentedControl

Toggle buttons for switching between different values or views.

#
Documentation

#
Usage

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

SegmentedControlItem extends the Button component.

import {
  SegmentedControl,
  SegmentedControlItem,
  Tooltip,
} from "@optiaxiom/react";
import { IconLayoutGrid, IconList } from "@tabler/icons-react";
 
export function App() {
  return (
    <SegmentedControl defaultValue="list">
      <Tooltip content="List">
        <SegmentedControlItem
          aria-label="List"
          icon={<IconList />}
          value="list"
        />
      </Tooltip>
 
      <Tooltip content="Grid">
        <SegmentedControlItem
          aria-label="Grid"
          icon={<IconLayoutGrid />}
          value="grid"
        />
      </Tooltip>
    </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.

import {
  Button,
  Flex,
  SegmentedControl,
  SegmentedControlItem,
  Tooltip,
} from "@optiaxiom/react";
import { IconLayoutGrid, IconList } from "@tabler/icons-react";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState("list");
 
  return (
    <Flex flexDirection="row">
      <SegmentedControl onValueChange={setValue} value={value}>
        <Tooltip content="List">
          <SegmentedControlItem
            aria-label="List"
            icon={<IconList />}
            value="list"
          />
        </Tooltip>
 
        <Tooltip content="Grid">
          <SegmentedControlItem
            aria-label="Grid"
            icon={<IconLayoutGrid />}
            value="grid"
          />
        </Tooltip>
      </SegmentedControl>
 
      <Button disabled={!value} onClick={() => setValue("list")}>
        Reset
      </Button>
    </Flex>
  );
}

#
Related

Button

Button component is used to trigger actions.

ToggleButton

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

#
Props

#
SegmentedControl

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
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 "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

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" \| "inverse"
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
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
iconOnly Whether button should have square shape. false \| true
iconPosition Control whether to show the icon before or after the button content. "end" \| "start"
loading Whether to show loading spinner inside the button. false \| true
size Control the size of the button. "sm" \| "md" \| "lg"
value* A string value for the toggle group item. All items within a toggle group should use a unique value. string

#
Changelog

#
0.2.0

Added component

SearchInput

Select ALPHA