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 input

Then import the component:

import { Input } from '@/components/ui/input';

Email Address

Username

Choose a unique username between 3-20 characters

The Input component supports three variants: default, error, and success.

Default Input

Error Input

This field is required

Success Input

Valid input

Three size options are available: sm, md, and lg. The default size is md.

Small Input

Medium Input

Large Input

Password

Disabled Input

Disabled with Icon

Read Only Input

This field is read-only

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.