Swatch Radio Group
Installation
Run the following command
npx vibes@latest add swatch-radio-groupUsage
'use client';import { SwatchRadioGroup } from '@/vibes/soul/form/swatch-radio-group';function Usage() { return ( <SwatchRadioGroup options={[ { type: 'color', label: 'Option 1', value: 'option-1', color: 'red' }, { type: 'color', label: 'Option 2', value: 'option-2', color: 'green' }, { type: 'color', label: 'Option 3', value: 'option-3', color: 'blue' }, ]} /> );}API Reference
SwatchRadioGroupProps
| Prop | Type | Default |
|---|---|---|
className | string | |
label | string | |
options | SwatchOption[] | |
errors | string[] | |
colorScheme | 'light' | 'dark' | 'light' |
onOptionMouseEnter | (value: string) => void |
SwatchOption
type SwatchOption = | { type: 'color'; value: string; label: string; color: string; disabled?: boolean; } | { type: 'image'; value: string; label: string; image: { src: string; alt: string }; disabled?: boolean; };CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --swatch-radio-group-focus: var(--primary); --swatch-radio-group-light-icon: var(--foreground); --swatch-radio-group-light-unchecked-border: transparent; --swatch-radio-group-light-unchecked-border-hover: var(--contrast-200); --swatch-radio-group-light-disabled-border: transparent; --swatch-radio-group-light-border-error: var(--error); --swatch-radio-group-light-checked-border: var(--foreground); --swatch-radio-group-light-option-border: color-mix(in oklab, var(--foreground) 10%, transparent); --swatch-radio-group-dark-icon: var(--background); --swatch-radio-group-dark-unchecked-border: transparent; --swatch-radio-group-dark-unchecked-border-hover: var(--contrast-400); --swatch-radio-group-dark-disabled-border: transparent; --swatch-radio-group-dark-border-error: var(--error); --swatch-radio-group-dark-checked-border: var(--background); --swatch-radio-group-dark-option-border: color-mix(in oklab, var(--background) 10%, transparent);}