Radio Group
Installation
Run the following command
npx vibes@latest add radio-groupUsage
'use client';import { RadioGroup } from '@/vibes/soul/form/radio-group';function Usage() { return ( <RadioGroup options={[ { value: 'option-1', label: ' Option 1' }, { value: 'option-2', label: ' Option 2' }, { value: 'option-3', label: ' Option 3' }, ]} /> );}API Reference
This component uses the Radix UI RadioGroup component. Refer to the RadioGroup documentation for more information.
RadioGroupProps
| Prop | Type | Default |
|---|---|---|
className | string | |
label | string | |
options* | Option[] | |
errors | string[] | |
colorScheme | 'light' | 'dark' | 'light' |
onOptionMouseEnter | (value: string) => void |
Option
| Prop | Type | Default |
|---|---|---|
value* | string | |
label* | string | |
disabled | boolean |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --radio-group-light-background: var(--background); --radio-group-light-border: var(--contrast-200); --radio-group-light-border-error: var(--error); --radio-group-light-disabled-border-error: color-mix(in oklab, var(--error) 50%, transparent); --radio-group-light-border-hover: var(--contrast-300); --radio-group-light-border-focus: var(--contrast-300); --radio-group-light-indicator-background: var(--foreground); --radio-group-light-label: var(--foreground); --radio-group-dark-background: var(--foreground); --radio-group-dark-border: var(--contrast-400); --radio-group-dark-border-error: var(--error); --radio-group-dark-disabled-border-error: color-mix(in oklab, var(--error) 50%, transparent); --radio-group-dark-border-hover: var(--contrast-300); --radio-group-dark-border-focus: var(--contrast-300); --radio-group-dark-indicator-background: var(--background); --radio-group-dark-label: var(--background);}