Segmented Control

Segmented controls let users switch between related options.

Basic

Source Code

import { Segmented, SegmentedItem } from '@ocean-network-express/magenta-ui/react';

export const Basic = () => {
  return (
    <Segmented>
      <SegmentedItem>First section</SegmentedItem>
      <SegmentedItem>Second section</SegmentedItem>
      <SegmentedItem>Third section</SegmentedItem>
    </Segmented>
  );
};

Default Selected Segment

  • You can set the default selected segment by using the defaultIndex prop.
  • The defaultIndex is 0 by default.

Controlled

  • To control Segmented state, use selectedIndex and onChange props.

Source Code

import { Segmented, SegmentedItem } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export const Controlled = () => {
  const [selectedIndex, setSelectedIndex] = React.useState(0);
  return (
    <Segmented selectedIndex={selectedIndex} onChange={setSelectedIndex}>
      <SegmentedItem>First section</SegmentedItem>
      <SegmentedItem>Second section</SegmentedItem>
      <SegmentedItem>Third section</SegmentedItem>
    </Segmented>
  );

Disabled

  • To disable a SegmentedItem, set the disabled prop to true.

Source Code

import { Segmented, SegmentedItem } from '@ocean-network-express/magenta-ui/react';

export const Disabled = () => {
  return (
    <Segmented>
      <SegmentedItem>First section</SegmentedItem>
      <SegmentedItem disabled>Second section</SegmentedItem>
      <SegmentedItem>Third section</SegmentedItem>
    </Segmented>
  );
};

Sizes

  • Segmented supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
  • Default size is lg.

Source Code

import { Segmented, SegmentedItem } from '@ocean-network-express/magenta-ui/react';

export const Sizes = () => {
  return (
    <div className="flex flex-col gap-y-8">
      <Segmented size="lg">
        <SegmentedItem>First section</SegmentedItem>
        <SegmentedItem>Second section</SegmentedItem>
        <SegmentedItem>Third section</SegmentedItem>
      </Segmented>
      <Segmented size="md">
        <SegmentedItem>First section</SegmentedItem>
  • With size responsive, the component will be responsive to the viewport.

Screen prefix

Screen width

Component size

xs → xl0px → 1279pxsm
xl → 3xl1280px → 1919pxmd
3xl → ∞1920px → ∞lg

Source Code

import { Segmented, SegmentedItem } from '@ocean-network-express/magenta-ui/react';

export const Responsive = () => {
  return (
    <Segmented size="responsive">
      <SegmentedItem>First section</SegmentedItem>
      <SegmentedItem>Second section</SegmentedItem>
      <SegmentedItem>Third section</SegmentedItem>
    </Segmented>
  );
};

Customization

Segmented control with indicator

Source Code

import { Indicator, Segmented, SegmentedItem } from '@ocean-network-express/magenta-ui/react';

export const SegmentedWithIndicator = () => {
  return (
    <div className="flex flex-col gap-y-24 items-center">
      <Segmented size="lg">
        <SegmentedItem>
          First section <Indicator size="lg" label="89" />
        </SegmentedItem>
        <SegmentedItem>Second section</SegmentedItem>
        <SegmentedItem>
          Third section <Indicator size="lg" label="25" />

Segmented control with overflow menu

Source Code

import { ChevronDownOutline, ChevronUpOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  DropdownMenu,
  DropdownMenuTrigger,
  Menu,
  MenuBody,
  MenuItem,
  MenuList,
  Segmented,
  SegmentedItem,
  TabPanel,
  TabPanels,

Accessibility

Roles and properties

  • The SegmentedItem component has the type="button", role="radio", tabIndex="-1" and data-segmented-item-index is current index of this item in a Segmented component.
  • The selected SegmentedItem has the aria-checked="true" and tabIndex="0"

Keyboard interactions

  • The Segmented component supports the following keyboard interactions when focus is on the SegmentedItem component:

Key

Description

Right Arrow

- Moves focus to the next segmented item.
- If focus is on the last segmented item, moves focus to the first segmented item.

Left Arrow

- Moves focus to the previous segmented item.
- If focus is on the first segmented item, moves focus to the last segmented item.

Home

Moves focus to the first segmented item.

End

Moves focus to the last segmented item.

Was this page helpful?