Segmented

A cross-platform React segmented control component for switching between related views or filters. Similar to iOS's UISegmentedControl.

Installation

npm install @xsolla/xui-segmented

Demo

Basic Segmented

import * as React from "react";
import { Segmented } from "@xsolla/xui-segmented";

export default function BasicSegmented() {
  const [active, setActive] = React.useState("day");

  return (
    <Segmented
      items={[
        { id: "day", label: "Day" },
        { id: "week", label: "Week" },
        { id: "month", label: "Month" },
      ]}
      activeId={active}
      onChange={setActive}
    />
  );
}

With Icons

import * as React from "react";
import { Segmented } from "@xsolla/xui-segmented";
import { Grid, List } from "@xsolla/xui-icons-base";

export default function IconSegmented() {
  const [active, setActive] = React.useState("grid");

  return (
    <Segmented
      items={[
        { id: "grid", label: "Grid", icon: <Grid size={16} /> },
        { id: "list", label: "List", icon: <List size={16} /> },
      ]}
      activeId={active}
      onChange={setActive}
    />
  );
}

Full Width

import * as React from "react";
import { Segmented } from "@xsolla/xui-segmented";

export default function FullWidthSegmented() {
  const [active, setActive] = React.useState("all");

  return (
    <div style={{ width: 400 }}>
      <Segmented
        fullWidth={true}
        items={[
          { id: "all", label: "All" },
          { id: "active", label: "Active" },
          { id: "completed", label: "Completed" },
        ]}
        activeId={active}
        onChange={setActive}
      />
    </div>
  );
}

Anatomy

import { Segmented } from "@xsolla/xui-segmented";

<Segmented
  items={[
    // Array of segment items
    { id: "a", label: "A" },
    { id: "b", label: "B" },
  ]}
  activeId="a" // Currently active item ID
  onChange={handleChange} // Selection change handler
  size="md" // Size variant
  fullWidth={false} // Expand to container width
/>;

Examples

Segmented Sizes

import * as React from "react";
import { Segmented } from "@xsolla/xui-segmented";

export default function SegmentedSizes() {
  const items = [
    { id: "a", label: "Option A" },
    { id: "b", label: "Option B" },
    { id: "c", label: "Option C" },
  ];

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      <Segmented size="sm" items={items} activeId="a" />
      <Segmented size="md" items={items} activeId="a" />
      <Segmented size="lg" items={items} activeId="a" />
      <Segmented size="xl" items={items} activeId="a" />
    </div>
  );
}

With Disabled Items

import * as React from "react";
import { Segmented } from "@xsolla/xui-segmented";

export default function DisabledItemSegmented() {
  const [active, setActive] = React.useState("enabled1");

  return (
    <Segmented
      items={[
        { id: "enabled1", label: "Enabled" },
        { id: "disabled", label: "Disabled", disabled: true },
        { id: "enabled2", label: "Enabled" },
      ]}
      activeId={active}
      onChange={setActive}
    />
  );
}

API Reference

Segmented

Segmented Props:

| Prop | Type | Default | Description | | :-------- | :----------------------------- | :------ | :------------------------------------------------------------------------------------------------------------ | | testID | string | — | Test ID for testing frameworks. On web this renders as data-testid; on React Native it renders as testID. | | items | SegmentedItemType[] | - | Required. Array of segment items. | | activeId | string | - | ID of the currently active item. | | onChange | (id: string) => void | - | Selection change handler. | | size | "xl" \| "lg" \| "md" \| "sm" | "md" | Size variant. | | fullWidth | boolean | false | Expand segments to fill container width. | | id | string | - | HTML id attribute. | | testID | string | - | Test identifier. |

SegmentedItemType:

interface SegmentedItemType {
  id: string; // Unique identifier
  label: string; // Display text
  icon?: ReactNode; // Optional icon
  disabled?: boolean; // Disabled state
  "aria-label"?: string; // Accessible label
}

Keyboard Navigation

| Key | Action | | :--------------- | :-------------------- | | Arrow Right/Down | Move to next item | | Arrow Left/Up | Move to previous item | | Enter/Space | Select focused item |

Behavior

• Active segment has elevated background with smooth sliding animation
• Disabled segments show reduced opacity
• Keyboard navigation wraps around
• Hover effect on non-active segments

Accessibility

• Uses role="radiogroup" on container
• Each segment has role="radio"
• aria-checked indicates selection state
• aria-disabled for disabled items
• Roving tabindex for keyboard navigation