VIBES: Stunning React components for commerce & marketing

Installation

Run the following command

npx vibes@latest add toggle-group

Usage

import { ToggleGroup } from '@/vibes/soul/form/toggle-group';function Usage() {  return (    <ToggleGroup      label="Options"      options={[        { value: 'option-1', label: ' Option 1' },        { value: 'option-2', label: ' Option 2' },        { value: 'option-3', label: ' Option 3' },      ]}      type="multiple"    />  );}

API Reference

This component uses the Toggle Group component from Radix UI. Refer to the Radix Toggle Group documentation for more information.

ToggleGroupProps

Prop	Type	Default
`label`	`string`
`options*`	`Option[]`
`errors`	`string[] \| null`	`null`
`colorScheme`	`'light' \| 'dark'`	`'light'`
`hideLabel`	`boolean`	`false`

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 {  --toggle-group-light-focus: var(--primary);  --toggle-group-light-border: var(--contrast-100);  --toggle-group-light-on-border: var(--foreground);  --toggle-group-light-on-background: var(--foreground);  --toggle-group-light-off-background: var(--background);  --toggle-group-light-off-text: var(--foreground);  --toggle-group-light-on-text: var(--background);  --toggle-group-light-off-border-hover: var(--contrast-200);  --toggle-group-light-off-background-hover: var(--contrast-100);  --toggle-group-dark-focus: var(--primary);  --toggle-group-dark-border: var(--contrast-500);  --toggle-group-dark-on-border: var(--background);  --toggle-group-dark-on-background: var(--background);  --toggle-group-dark-off-background: var(--foreground);  --toggle-group-dark-off-text: var(--background);  --toggle-group-dark-on-text: var(--foreground);  --toggle-group-dark-off-border-hover: var(--contrast-400);  --toggle-group-dark-off-background-hover: var(--contrast-500);}

Textarea