Select
Installation
Run the following command
npx vibes@latest add selectUsage
import { Select } from '@/vibes/soul/form/select';function Usage() { return ( <Select name="options" 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 Select component from Radix UI. Refer to the Radix Select documentation for more information.
SelectProps
| Prop | Type | Default |
|---|---|---|
className | string | |
colorScheme | 'light' | 'dark' | 'light' |
id | string | |
name* | string | |
pending | boolean | |
placeholder | string | |
label | string | |
hideLabel | boolean | |
placeholder | string | 'Select an item' |
variant | 'round' | 'rectangle' | 'rectangle' |
options* | Array<{ label: string; value: string }> | |
className | string | |
errors | string[] | |
onFocus | (e: React.FocusEvent<HTMLButtonElement>) => void | |
onBlur | (e: React.FocusEvent<HTMLButtonElement>) => void | |
onOptionMouseEnter | (value: string) => void |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --select-light-trigger-background: var(--background); --select-light-trigger-border: var(--contrast-100); --select-light-trigger-border-hover: var(--contrast-300); --select-light-trigger-border-error: var(--error); --select-light-trigger-text: var(--foreground); --select-light-trigger-focus: var(--primary); --select-light-icon: var(--foreground); --select-light-content-background: var(--background); --select-light-item-background-hover: var(--contrast-100); --select-light-item-background-focus: var(--contrast-100); --select-light-item-text: var(--contrast-400); --select-light-item-text-hover: var(--foreground); --select-light-item-text-focus: var(--foreground); --select-light-item-checked-text-focus: var(--foreground); --select-dark-trigger-background: var(--foreground); --select-dark-trigger-border: var(--contrast-500); --select-dark-trigger-border-hover: var(--contrast-300); --select-dark-trigger-border-error: var(--error); --select-dark-trigger-text: var(--background); --select-dark-trigger-focus: var(--primary); --select-dark-icon: var(--background); --select-dark-content-background: var(--foreground); --select-dark-item-background-hover: var(--contrast-500); --select-dark-item-background-focus: var(--contrast-500); --select-dark-item-text: var(--contrast-200); --select-dark-item-text-hover: var(--background); --select-dark-item-text-focus: var(--background); --select-dark-item-checked-text-focus: var(--background);}