Toggle group · Components

The native kit's real component, live in its web build at phone width. Follows this site's theme.

Usage

Use type="single" for a segmented control.

<ToggleGroup type="single|multiple" value onValueChange><ToggleGroupItem value … /></ToggleGroup>

Already in every copy of the native kit:

import { ToggleGroup } from '@/components/ui/toggle-group';

Exports: ToggleGroup
Source: apps/mobile/components/ui/toggle-group.tsx
Packages: @rn-primitives/toggle-group@^1.5.2, class-variance-authority@^0.7.1
Installs with: @kit-native/icon, @kit-native/lib-utils, @kit-native/text, @kit-native/toggle
Also searched as: segmented, multi select buttons
Registry JSON: /r/native/toggle-group.json

The web kit's real component, live. Follows this site's theme.

Use type="single" for a segmented control (view switchers, ranges). Selected state is neutral, not the brand colour.

<ToggleGroup type="single" value onValueChange><ToggleGroupItem value>…</ToggleGroupItem></ToggleGroup>

Already in every copy of the web kit:

import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';

Agents: the whole registry is at /llms.txt.