Segmented Control

A single-select switch on a tertiary track with a sliding white thumb - the Weekly / Monthly / Yearly switcher from the chart cards. Built on React Aria ToggleButtonGroup: arrow keys move, Space selects.

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeSegmentedControlExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeSegmentedControlExample/></NativeScope>}

Controlled selection

Selection uses React Aria's key-set API: pass selectedKeys + onSelectionChange to control it, or defaultSelectedKeys for uncontrolled. Guard against empty sets to keep one segment always active.

usage

'use client';
import '@helios-ui/react/styles.css';
import {useState} from 'react';
import {NativeScope,NativeSegmentedControl,NativeSegmentedControlItem} from '@helios-ui/react';
export function Example(){
const[selected,setSelected]=useState<Set<string>>(new Set(['weekly']));
return <NativeScope><NativeSegmentedControl aria-label="Period"selectedKeys={selected}onSelectionChange={keys=>setSelected(new Set([...keys].map(String)))}>{["weekly","monthly","yearly"].map(id=><NativeSegmentedControlItem key={id}id={id}>{id}</NativeSegmentedControlItem>)}</NativeSegmentedControl></NativeScope>;
}

Advanced playground, API and recovery states ↗

Segmented Control

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeSegmentedControlExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeSegmentedControlExample/></NativeScope>}

Controlled selection

usage

'use client';
import '@helios-ui/react/styles.css';
import {useState} from 'react';
import {NativeScope,NativeSegmentedControl,NativeSegmentedControlItem} from '@helios-ui/react';
export function Example(){
const[selected,setSelected]=useState<Set<string>>(new Set(['weekly']));
return <NativeScope><NativeSegmentedControl aria-label="Period"selectedKeys={selected}onSelectionChange={keys=>setSelected(new Set([...keys].map(String)))}>{["weekly","monthly","yearly"].map(id=><NativeSegmentedControlItem key={id}id={id}>{id}</NativeSegmentedControlItem>)}</NativeSegmentedControl></NativeScope>;
}

Advanced playground, API and recovery states ↗

Segmented Control

Installation

Controlled selection

Search Helios UI

Segmented Control

Installation

Controlled selection

Search Helios UI