animui

Segmented control

Switch between a small set of related views.

npm install https://animui.stracture.net/__local/package.tgz
Live · keyboard ready
  • Two to five short view options like Day, Week, and Month.
  • Toolbar toggles between layouts or modes that apply immediately.
  • Use tabs when each option swaps a panel of content.
  • Use radio-group in forms or when options need descriptions.
  • Use switch for a single on and off setting.

Installation

Install animui once, then import any component or block from its typed package entry.

animui · 250 components and blocks

React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.

npm install https://animui.stracture.net/__local/package.tgz

Load the stylesheet once at your app root, then use the typed component import:

import 'animui/styles.css';
import * as Component from 'animui/segmented-control';

Read the Code tab for the implementation files and the API reference below for required props.

Download animui 0.3.0 · Agent guide
example.tsx
import SegmentedControl from "animui/segmented-control"; export function RangeToggle() {  const [range, setRange] = useState("week");  return (    <SegmentedControl      label="Range"      value={range}      onValueChange={setRange}      options={[        { value: "day", label: "Day" },        { value: "week", label: "Week" },        { value: "month", label: "Month" },      ]}    />  );}

SegmentedControl

A row of toggle buttons with one selection pill that slides between them. Default export.

PropTypeDefaultDescription
optionsRequired{ value: string; label: string; accessory?: ReactNode }[]–Segments in order. An accessory, such as a badge, renders after the label.
valueRequiredstring–Selected value.
onValueChangeRequired(value: string) => void–Called with the chosen segment's value, from a click or the arrow, Home and End keys.
labelstring–aria-label for the group.
onOptionIntent(value: string) => void–Called when the pointer or focus reaches a segment before it is chosen, to start loading what it shows.
classNamestring–Extra class on the root.
Tab
Moves focus into the control, onto the selected segment, and out again.
Arrow keys
Select and focus the previous or next segment, wrapping at the ends.
HomeorEnd
Select the first or last segment.
  • Renders role="group" labelled by label, with native buttons using aria-pressed for the selected segment. Only the selected segment is a tab stop.
  • The sliding pill is aria-hidden.
  • A shared layoutId pill slides to the selected segment on the morph spring, scoped per instance by a LayoutGroup.
  • Reduced motion moves the pill instantly and disables button transitions.
  • The row is inline with max-width 100% and scrolls horizontally with a hidden scrollbar when segments do not fit.
  • Segments never shrink or wrap, so keep labels short on mobile.
  • One shared layoutId pill per instance, scoped by a LayoutGroup; no observers.

Notes for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Use for two to five short, mutually exclusive view options like time ranges or layouts. Use tabs when each option swaps a panel, and radio-group in forms.
  • Always controlled. Import it as a default export.
/components/segmented-control/markdown

The full library index for assistants is at /llms.txt.

TabsComponentSwitch between related content in the same context.Radio groupComponentChoose one option from a visible set.SwitchComponentA tactile toggle for settings that take effect immediately.Liquid tab barProComponentTabs with a lens selection that slides between them, swaps labels cleanly, and fills in icons as it passes.