Your schedule
Studio review10:30
iOS segmented control
A pill-shaped single choice with a full selected fill, radio semantics and arrow-key selection.
Preview
In action
When to use
Use it for
- A small set of mutually exclusive modes or filters.
- Use name to include the selected value in form data.
Not for
- Navigation among independent application destinations; use the iOS tab bar.
- Many options that require a long horizontal scroll.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { IOSSegmentedControl } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/ios-segmented-control.
2. Vendor the source
npx @noorddev/vlak-cli add ios-segmented-control
The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/ios-segmented-control.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { IOSSegmentedControl } from "@noorddev/vlak-react";
<IOSSegmentedControl name="view" label="Calendar view" defaultValue="day" items={[{ id: "day", label: "Day" }, { id: "week", label: "Week" }, { id: "month", label: "Month" }]} />Props
IOSSegmentedControl
A mutually exclusive choice with one Tab stop and arrow-key selection.
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | IOSSegmentedControlItem[] | ||
value | string | ||
defaultValue | string | ||
onValueChange | (value: string) => void | ||
name | string | ||
form | string | ||
disabled | boolean | ||
label | string | "View" |
Also accepts Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "children">.
Keyboard
| Keys | Does |
|---|---|
| Tab, Shift+Tab | Enters or leaves the group through its selected option. |
| Arrows, Home, End | Moves and selects enabled options; horizontal arrows respect text direction. |
| Enter, Space | Selects the focused option. |
Accessibility
- Named radiogroup with one tab stop, explicit checked state and disabled options.
- Native form reset is supported; reduced motion and forced colors retain readable selection.
Markup
<div class="rs-ios-segmented-control" role="radiogroup" aria-label="Calendar view"><button class="rs-ios-segmented-control-item rs-ios-segmented-control-selected" role="radio" aria-checked="true" tabindex="0">Day</button><button class="rs-ios-segmented-control-item" role="radio" aria-checked="false" tabindex="-1">Month</button></div>
Classes
.rs-ios-segmented-control.rs-ios-segmented-control-item.rs-ios-segmented-control-selected.rs-ios-segmented-control-disabled