Number Input
Installation
Run the following command
npx vibes@latest add number-inputUsage
import { NumberInput } from '@/vibes/soul/form/number-input';function Usage() { return ( <NumberInput errors={['Please select a quantity.']} min={0} max={5} label="Quantity" /> );}API Reference
NumberInputProps
| Prop | Type | Default |
|---|---|---|
className | string | |
label | string | |
errors | string[] | |
decrementLabel | string | |
incrementLabel | string | |
colorScheme | 'light' | 'dark' | 'light' |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --number-input-focus: var(--primary); --number-input-light-background: var(--background); --number-input-light-text: var(--foreground); --number-input-light-icon: var(--contrast-300); --number-input-light-icon-hover: var(--foreground); --number-input-light-button-background: var(--background); --number-input-light-button-background-hover: color-mix(in oklab, var(--contrast-100) 50%, transparent); --number-input-light-button-border: var(--contrast-100); --number-input-light-button-border-error: var(--error); --number-input-dark-background: var(--background); --number-input-dark-text: var(--background); --number-input-dark-icon: var(--contrast-300); --number-input-dark-icon-hover: var(--background); --number-input-dark-button-background: var(--foreground); --number-input-dark-button-background-hover: color-mix(in oklab, var(--contrast-500) 50%, transparent); --number-input-dark-button-border: var(--contrast-500); --number-input-dark-button-border-error: var(--error);}