Input
Installation
Run the following command
npx vibes@latest add inputUsage
import { Input } from '@/vibes/soul/form/input';function Usage() { return ( <Input label="username" /> );}API Reference
InputProps
| Prop | Type | Default |
|---|---|---|
className | string | |
prepend | React.ReactNode | |
label | string | |
hideLabel | boolean | true |
errors | string[] | |
colorScheme | 'light' | 'dark' | 'light' |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --input-light-background: var(--background); --input-light-text: var(--foreground); --input-light-border: var(--contrast-100); --input-light-border-error: var(--error); --input-light-focus: var(--foreground); --input-light-placeholder: var(--contrast-500); --input-dark-background: var(--foreground); --input-dark-text: var(--background); --input-dark-border: var(--contrast-500); --input-dark-border-error: var(--error); --input-dark-focus: var(--background); --input-dark-placeholder: var(--contrast-100);}