Input

Preview

Basic Inputs

Full Name

Email Address *

Phone Number

Website

Input States

Default State

This is a helper text

Error State

This field is required

Success State

Looks good!

Disabled State

Input Sizes

Small Input

Medium Input

Large Input

With Prefix & Suffix

Amount

$

Domain

.com

Weight

kg

Percentage

%

Loading State

Checking Availability

Validating Email

Date & Time Inputs

Birth Date

Appointment Time

Meeting Time

Event Month

Rounded Variants

No Radius

Small Radius

Medium Radius

Large Radius

Full Radius

Special Input Types

Password

Search

Age

Code

<!-- Basic Input -->
<Input
  label="Full Name"
  placeholder="Enter your full name"
  required={true}
/>

<!-- Input with Error -->
<Input
  label="Email"
  type="email"
  placeholder="you@example.com"
  errorMessage="Please enter a valid email"
/>

<!-- Input with Success -->
<Input
  label="Username"
  placeholder="Choose username"
  successMessage="Username is available!"
/>

<!-- Input with Prefix/Suffix -->
<Input
  label="Price"
  type="number"
  prefix="$"
  suffix="USD"
  placeholder="0.00"
/>

<!-- Loading State -->
<Input
  label="Checking..."
  placeholder="Enter value"
  loading={true}
/>

<!-- Different Sizes -->
<Input label="Small" size="small" />
<Input label="Medium" size="medium" />
<Input label="Large" size="large" />

<!-- Date/Time Inputs -->
<Input label="Date" type="date" />
<Input label="Time" type="time" />
<Input label="DateTime" type="datetime-local" />

Install

npx ui-gen add Input

---

Properties

label

type: string

default: undefined

The label text displayed above the input field.

type

type: string

options: 'text', 'email', 'password', 'number', 'tel', 'url', 'search', 'date', 'datetime-local', 'time', 'month', 'week'

default: 'text'

The HTML input type attribute.

size

type: string

options: 'small', 'medium', 'large'

default: 'medium'

Controls the input size and padding.

state

type: string

options: 'default', 'error', 'success', 'warning'

default: 'default'

Visual state of the input. Automatically determined if error or success messages are provided.

rounded

type: string

options: 'none', 'sm', 'md', 'lg', 'full'

default: 'md'

Controls the border radius of the input.

placeholder

type: string

default: undefined

Placeholder text displayed when the input is empty.

helperText

type: string

default: undefined

Helper text displayed below the input to provide additional guidance.

errorMessage

type: string

default: undefined

Error message displayed below the input. Automatically sets state to ‘error’.

successMessage

type: string

default: undefined

Success message displayed below the input. Automatically sets state to ‘success’.

required

type: boolean

default: false

Marks the field as required and displays a red asterisk (*) next to the label.

disabled

type: boolean

default: false

Disables the input field.

loading

type: boolean

default: false

Shows a loading spinner and disables the input.

prefix

type: string

default: undefined

Text or symbol displayed at the beginning of the input (e.g., ”$”, ”@”).

suffix

type: string

default: undefined

Text or symbol displayed at the end of the input (e.g., “.com”, ”%”, “kg”).

id

type: string

default: auto-generated

Unique identifier for the input. If not provided, one will be automatically generated.

Accessibility

The Input component is built with comprehensive accessibility features:

• WCAG 2.1 AA Compliant with proper color contrast and focus indicators
• Semantic HTML with proper label association using for attribute
• ARIA attributes including aria-invalid, aria-describedby, and role attributes
• Screen reader support with descriptive error and success messages
• Keyboard navigation with full tab support and focus management
• Required field indication with both visual (*) and semantic markup
• Live regions for dynamic error and success messages (role="alert" and role="status")
• Unique IDs automatically generated to ensure proper label association

Examples

Basic Form Input

<Input
  label="Email Address"
  type="email"
  placeholder="Enter your email"
  required={true}
  helperText="We'll never share your email"
/>

Input with Validation

<Input
  label="Username"
  placeholder="Choose a username"
  errorMessage="Username already taken"
/>

Currency Input

<Input
  label="Price"
  type="number"
  prefix="$"
  suffix="USD"
  placeholder="0.00"
  step="0.01"
/>

Search Input

<Input
  label="Search Products"
  type="search"
  placeholder="Search..."
  prefix="🔍"
/>

Date Input

<Input
  label="Birth Date"
  type="date"
  required={true}
/>