Input

The Input component is a versatile text input field for collecting user data. It supports all standard HTML input types and provides consistent styling across your application.

Installation

npm install @nqlib/nqui

Import

import { Input } from '@nqlib/nqui';

Basic Usage

import { Input } from '@nqlib/nqui';

export default function Example() {
  return <Input type="text" placeholder="Enter your name" />;
}

Examples

Example Code

'use client';import { Input, Label } from '@nqlib/nqui';export default function Example() {  return (    <div className="space-y-2">      <Label htmlFor="email">Email</Label>      <Input id="email" type="email" placeholder="name@example.com" />    </div>  );}

'use client';import { Input, Label } from '@nqlib/nqui';export default function Example() {  return (    <div className="space-y-2">      <Label htmlFor="email">Email</Label>      <Input        id="email"        type="email"        placeholder="name@example.com"        className="border-destructive focus-visible:ring-destructive"        aria-invalid="true"      />      <p className="text-sm text-destructive">Please enter a valid email address</p>    </div>  );}

Input Types

The Input component supports all standard HTML input types:

• text - Single-line text input
• email - Email address input
• password - Password input (masked)
• number - Numeric input
• date - Date picker
• time - Time picker
• datetime-local - Date and time picker
• search - Search input
• tel - Telephone number input
• url - URL input
• file - File upload (with special styling)

States

Disabled

<Input type="text" placeholder="Disabled input" disabled />

Read Only

<Input type="text" value="Read only value" readOnly />

Props

The Input component accepts all standard HTML input attributes:

Styling

Inputs use the following design tokens:

• Border: border-input
• Background: bg-background
• Text: text-foreground
• Placeholder: text-muted-foreground
• Focus ring: ring-ring with ring-offset-background
• Disabled: opacity-50 with cursor-not-allowed

You can customize the appearance using Tailwind classes:

<Input className="border-2 border-primary focus-visible:ring-primary" />

Accessibility

• Proper label association via htmlFor and id
• ARIA attributes for error states (aria-invalid)
• Keyboard navigation support
• Screen reader friendly
• Focus management with visible focus rings

Best Practices

1. Always use labels: Pair every input with a label for accessibility
2. Use appropriate types: Choose the correct input type for better UX (email, password, etc.)
3. Provide placeholders: Use helpful placeholder text to guide users
4. Handle errors: Show clear error messages and highlight invalid inputs
5. Consider validation: Use HTML5 validation attributes (required, pattern, etc.)

Next Steps

• Learn about Textarea for multi-line input
• Explore Field component for form field wrapper with error handling
• Check out InputGroup for inputs with addon elements
• See Form Components for other form elements