Sticker Radio Group
A strip of kiss-cut cells where only the chosen sticker has been peeled off the backing.
InputsClient component
Preview
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/sticker-radio-groupPulls in @duck/theme. Already installed items are skipped.
Usage
import { StickerRadioGroup, StickerRadio } from "@/components/ui/sticker-radio-group"The file lands in components/ui/sticker-radio-group.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | - | On the group: shared radio name. Generated when omitted. |
| value / defaultValue / onValueChange | string | - | On the group: controlled or uncontrolled selection. |
| value | string | - | On StickerRadio: the option's value. Required. |
| description | string | - | On StickerRadio: second line, for when the label alone does not explain the choice. |
Rules
What keeps this component from turning into noise.
- Wrap it in a GlowFieldset. A radio group needs a group name and a legend is the only thing that reliably supplies one.
- Selection changes the border style, not only its colour, so the choice survives greyscale and forced colours.
- Arrow keys, roving tab order and the tabbable-when-empty rule are native radio behaviour. Do not reimplement them.