Inputs and selection
Segmented control
Available forNativeWeb
2–4 options, animated thumb
Usage
2–4 mutually exclusive options. For content panes use Tabs.
API
<SegmentedControl segments={[{value,label}]} value onChange />Get it
Already in every copy of the native kit:
import { SegmentedControl } from '@/components/kit/segmented-control';Details
- Exports
SegmentedControl- Installs with
- @kit-native/lib-haptics, @kit-native/lib-reduced-motion, @kit-native/lib-theme, @kit-native/lib-utils, @kit-native/text
- Also searched as
- segment, ios, switcher
- Registry JSON
- /r/native/segmented-control.json
Usage
2–4 mutually exclusive options. For content panes use Tabs.
API
<SegmentedControl segments={[{value,label}]} value onChange aria-label />Get it
Already in every copy of the web kit:
import { SegmentedControl } from '@/components/kit/segmented-control';Details
- Exports
SegmentedControl- Packages
- cn@^0.4.0
- Installs with
- @kit/hook-use-reduced-motion
- Also searched as
- segments, switcher
- Registry JSON
- /r/web/segmented-control.json
Agents: the whole registry is at /llms.txt.