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 {
  IconDeviceImac,
  IconDeviceMobile,
  IconDeviceTablet,
} from "@tabler/icons-react";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState("desktop");
 
  return (
    <Flex flexDirection="row">
      <SegmentedControl onValueChange={setValue} value={value}>
        <Tooltip content="Desktop">
          <SegmentedControlItem
            aria-label="Desktop"
            icon={<IconDeviceImac />}
            key="desktop"
            value="desktop"
          />
        </Tooltip>
        <Tooltip content="Tablet">
          <SegmentedControlItem
            aria-label="Tablet"
            icon={<IconDeviceTablet />}
            key="tablet"
            value="tablet"
          />
        </Tooltip>
        <Tooltip content="Mobile">
          <SegmentedControlItem
            aria-label="Mobile"
            icon={<IconDeviceMobile />}
            key="mobile"
            value="mobile"
          />
        </Tooltip>
      </SegmentedControl>
 
      <Button disabled={!value} onClick={() => setValue("desktop")}>
        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`
`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"`
`square` Whether button should have square shape. `false \| true`
`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