スウォッチグループSwatchGroupExperimental

Selectable color swatch group (single-select) with roving keyboard focus and disabled out-of-stock swatches, for product variant and theme pickers.

Props

表は横にスクロールできます

プロパティ	型	初期値	説明
options	SwatchOption[]	-	Swatches: { value, label, color, disabled? }.
value	string	-	Selected swatch value (controlled).
onValueChange	(value: string) => void	-	Selection change handler.
size	"sm" \| "default" \| "lg"	"default"	Swatch size.
disallowEmpty	boolean	-	Keep a selection — clicking the active swatch won't clear it.
className	string	-	Additional CSS class names.

Usage

import { SwatchGroup } from "@gunjo/ui"

const options = [
  { value: "ink", label: "Ink", color: "hsl(var(--foreground))" },
  { value: "primary", label: "Primary", color: "hsl(var(--primary))" },
  { value: "muted", label: "Muted (sold out)", color: "hsl(var(--muted))", disabled: true },
]

export function Example() {
  const [color, setColor] = React.useState("ink")
  return <SwatchGroup options={options} value={color} onValueChange={setColor} disallowEmpty />
}

スウォッチグループSwatchGroupExperimental

プレビュー

Props

Usage