Input
A versatile input component with multiple variants, sizes, icons, and dark mode support
Installation
Install the Input component using the nocta-ui CLI:
npx nocta-ui add inputThen import the component:
import { Input } from '@/components/ui/input';Basic Usage
Default Input
Input with Label
Input with Helper Text
Choose a unique username between 3-20 characters
Variants
The Input component supports three variants: default, error, and success.
This field is required
Valid input
Sizes
Three size options are available: sm, md, and lg. The default size is md.
Input with Icons
Left Icon
Right Icon
Input States
Disabled State
Read Only State
This field is read-only
Customization
Custom Styling
The Input component accepts className and containerClassName props for custom styling:
<Input
className="border-2 border-purple-300 focus-visible:border-purple-500"
containerClassName="max-w-xs"
label="Custom Styled Input"
placeholder="Custom styling"
/>
<Input
className="rounded-full"
label="Rounded Input"
placeholder="Fully rounded"
/>Custom Container
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'error' | 'success' | 'default' | Input style variant |
size | 'sm' | 'md' | 'lg' | 'md' | Input size |
label | string | — | Label text displayed above the input |
helperText | string | — | Helper text displayed below the input |
errorMessage | string | — | Error message (shown when variant is 'error') |
leftIcon | React.ReactNode | — | Icon displayed on the left side |
rightIcon | React.ReactNode | — | Icon displayed on the right side |
className | string | '' | Additional CSS classes for the input |
containerClassName | string | '' | Additional CSS classes for the container |
disabled | boolean | false | Disable the input |
readOnly | boolean | false | Make the input read-only |
placeholder | string | — | Placeholder text |
type | string | 'text' | Input type (text, email, password, etc.) |
The Input component also accepts all standard HTML input attributes.