Button Radio Group
Installation
Run the following command
npx vibes@latest add button-radio-groupUsage
'use client';import { ButtonRadioGroup } from '@/vibes/soul/form/button-radio-group';function Usage() { return ( <ButtonRadioGroup options={[ { label: 'Option 1', value: 'option-1' }, { label: 'Option 2', value: 'option-2' }, { label: 'Option 3', value: 'option-3' }, ]} /> );}API Reference
This component uses the RadioGroup component from Radix UI. Refer to the RadioGroup documentation for more information.
ButtonRadioGroupProps
| 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 | |
disabled | boolean |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --button-radio-group-focus: var(--primary); --button-radio-group-light-unchecked-border: var(--contrast-100); --button-radio-group-light-unchecked-background: var(--background); --button-radio-group-light-unchecked-text: var(--foreground); --button-radio-group-light-unchecked-border-hover: var(--contrast-200); --button-radio-group-light-unchecked-background-hover: var(--contrast-100); --button-radio-group-light-checked-background: var(--foreground); --button-radio-group-light-checked-text: var(--background); --button-radio-group-light-border-error: var(--error); --button-radio-group-dark-unchecked-border: var(--contrast-500); --button-radio-group-dark-unchecked-background: var(--foreground); --button-radio-group-dark-unchecked-text: var(--background); --button-radio-group-dark-unchecked-border-hover: var(--contrast-400); --button-radio-group-dark-unchecked-background-hover: var(--contrast-500); --button-radio-group-dark-checked-background: var(--background); --button-radio-group-dark-checked-text: var(--foreground); --button-radio-group-dark-border-error: var(--error);}