Card Radio Group
Installation
Run the following command
npx vibes@latest add card-radio-groupUsage
'use client';import { CardRadioGroup } from '@/vibes/soul/form/card-radio-group';function Usage() { return ( <CardRadioGroup options={[ { label: 'Philodendron Imperial Red', value: 'option-1', image: { src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTowNzAzMzk0Ni01NGNhLTQ3ZDYtODgyYi0wYWI3NTUzNTU4YjQ=/kv08IvX08j.jpeg', alt: 'Philodendron Imperial Red', }, }, { label: 'Monstera', value: 'option-2', image: { src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZToyMTIwYzE1ZC01YzlkLTQ3MDgtOTZhOS1hZDkwYjVmNDAwZWY=/n0P83RMnClS%202930x3663.jpeg', alt: 'Monstera', }, }, { label: 'Pink Caladium', value: 'option-3', image: { src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTpmNjJhNTMyOC1hNzMwLTQxYjQtODE5Ny05ZDdlYWViMjJhMDQ=/AaZW4j2VTd4%202489x3111.jpeg', alt: 'Pink Caladium', }, }, ]} /> );}API Reference
This component uses the RadioGroup component from Radix UI. Refer to the RadioGroup documentation for more information.
CardRadioGroupProps
| Prop | Type | Default |
|---|---|---|
className | string | |
label | string | |
options* | Option[] | |
errors | string[] | |
onOptionMouseEnter | (value: string) => void | |
colorScheme | 'light' | 'dark' | 'light' |
Option
| Prop | Type | Default |
|---|---|---|
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 { --card-radio-group-focus: var(--primary); --card-radio-group-light-unchecked-border: var(--contrast-100); --card-radio-group-light-unchecked-border-hover: var(--contrast-200); --card-radio-group-light-unchecked-background: var(--background); --card-radio-group-light-unchecked-text: var(--foreground); --card-radio-group-light-unchecked-background-hover: var(--contrast-100); --card-radio-group-light-checked-background: var(--foreground); --card-radio-group-light-checked-text: var(--background); --card-radio-group-light-border-error: var(--error); --card-radio-group-dark-unchecked-border: var(--contrast-500); --card-radio-group-dark-unchecked-border-hover: var(--contrast-400); --card-radio-group-dark-unchecked-background: var(--foreground); --card-radio-group-dark-unchecked-background-hover: var(--contrast-500); --card-radio-group-dark-unchecked-text: var(--background); --card-radio-group-dark-checked-background: var(--background); --card-radio-group-dark-checked-text: var(--foreground); --card-radio-group-dark-border-error: var(--error);}