Sticker Toggle Group

A segmented control cut from one strip of vinyl: the border belongs to the whole set and only the chosen panel takes the lime fill.

InputsClient component

Preview

238 films by date added, filtered by unwatched.

The CLI writes the source into your project and pulls in whatever it depends on.

$pnpm dlx shadcn@latest add @duck/sticker-toggle-group

Pulls in @duck/theme. Already installed items are skipped.

import { StickerToggleGroup, StickerToggleGroupItem } from "@/components/ui/sticker-toggle-group"

The file lands in components/ui/sticker-toggle-group.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.

Everything not listed here is forwarded to the underlying element.

Prop	Type	Default	Description
type	"single" \| "multiple"	"single"	Single is a choice among options and renders a radiogroup of radios, so the reader announces "2 of 4". Multiple is a set of independent switches and renders a toolbar of aria-pressed buttons.
value / defaultValue / onValueChange	string \| string[]	-	Controlled or uncontrolled. A string in single mode, an array in multiple — the props are typed per mode, so onValueChange={setSort} still infers.
size	"sm" \| "default"	"default"	Panel height and text size. sm is for a control bar above a grid.
disabled	boolean	false	On the group: disables every panel. Items take their own disabled too, and arrow keys skip both.
value	string	-	On StickerToggleGroupItem: the panel's value. Required.

What keeps this component from turning into noise.

Give the group an aria-label. A radiogroup or a toolbar with no name is announced as an unnamed container, and the panels alone do not say what they sort.
Single select never empties: clicking the chosen panel keeps it, exactly as a radio does. If "none" is a real answer, give it a panel.
One tab stop for the whole set — arrows move inside it, Home and End jump to the ends, and both wrap. A toolbar of four costs one Tab, not four.
Not a replacement for DuckTabs. Use this when the choice reorders or filters what is already on screen, tabs when it swaps the panel underneath.

Everything not listed here is forwarded to the underlying element.

Prop	Type	Default	Description
type	"single" \| "multiple"	"single"	Single is a choice among options and renders a radiogroup of radios, so the reader announces "2 of 4". Multiple is a set of independent switches and renders a toolbar of aria-pressed buttons.
value / defaultValue / onValueChange	string \| string[]	-	Controlled or uncontrolled. A string in single mode, an array in multiple — the props are typed per mode, so onValueChange={setSort} still infers.
size	"sm" \| "default"	"default"	Panel height and text size. sm is for a control bar above a grid.
disabled	boolean	false	On the group: disables every panel. Items take their own disabled too, and arrow keys skip both.
value	string	-	On StickerToggleGroupItem: the panel's value. Required.

What keeps this component from turning into noise.

Give the group an aria-label. A radiogroup or a toolbar with no name is announced as an unnamed container, and the panels alone do not say what they sort.
Single select never empties: clicking the chosen panel keeps it, exactly as a radio does. If "none" is a real answer, give it a panel.
One tab stop for the whole set — arrows move inside it, Home and End jump to the ends, and both wrap. A toolbar of four costs one Tab, not four.
Not a replacement for DuckTabs. Use this when the choice reorders or filters what is already on screen, tabs when it swaps the panel underneath.