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