Chuv Studio

02 — COMPONENTS

Toggle Group

Segmented selection component for filters, content modes, section views, and tool-state switching. Built from shadcn/ui and adapted to the Chuv Studio foundation with straight edges, card discipline, and responsive layout behavior.

Selection Modes

Use single selection for view switching and multiple selection for combined filters

Single
<ToggleGroup type="single" value={value} onValueChange={setValue}>
  <ToggleGroupItem value="overview">Overview</ToggleGroupItem>
  <ToggleGroupItem value="process">Process</ToggleGroupItem>
  <ToggleGroupItem value="result">Result</ToggleGroupItem>
</ToggleGroup>
Multiple
<ToggleGroup type="multiple" value={values} onValueChange={setValues}>
  <ToggleGroupItem value="design">Design</ToggleGroupItem>
  <ToggleGroupItem value="build">Build</ToggleGroupItem>
  <ToggleGroupItem value="ops">Ops</ToggleGroupItem>
</ToggleGroup>

Studio Contexts

Examples that fit a design and tech studio workflow

Portfolio View

Service Filter

Text Align

<ToggleGroup type="single" defaultValue="grid" spacing={8}>
  <ToggleGroupItem value="grid">Grid</ToggleGroupItem>
  <ToggleGroupItem value="list">List</ToggleGroupItem>
</ToggleGroup>

Sizes & Variants

Use compact controls in dense UI and larger controls when the toggle is part of the section narrative

SM
<ToggleGroup type="single" size="sm" variant="default" spacing={8}>
  ...
</ToggleGroup>
Default
<ToggleGroup type="single" size="default" variant="default" spacing={8}>
  ...
</ToggleGroup>
Outline
<ToggleGroup type="single" size="default" variant="outline" spacing={8}>
  ...
</ToggleGroup>
LG
<ToggleGroup type="single" size="lg" variant="default" spacing={8}>
  ...
</ToggleGroup>

Interactive Demo

Adjust size, variant, and orientation to preview how the component behaves in responsive layouts

Size

Variant

Orientation

Usage

Import, key props, and accessibility behavior

Import

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

Key Props

Use type, value, onValueChange, size, variant, spacing, and orientation to control selection and layout.

Single vs Multiple

Choose type="single" for mutually exclusive views and type="multiple" when combining active filters.

Responsive Behavior

The group wraps in horizontal layouts and can switch to vertical stacking when the context needs a clearer mobile flow.

Accessibility Notes

Always provide an aria-label when the item is icon-only. Keep labels clear and make the active state visually obvious.