Input

The Input component is a styled text input field for capturing user data. It supports multiple variants for validation states, three sizes, and extends all native HTML input attributes.

Import

import { Input } from '@nim-ui/components';

Variants

Input comes in three variants to communicate validation state.

Input Variants

View Code

<Input variant="default" placeholder="Default input" />
<Input variant="error" placeholder="Error input" />
<Input variant="success" placeholder="Success input" />

Sizes

Three size options are available: small, medium (default), and large.

Input Sizes

View Code

<Input size="sm" placeholder="Small input" />
<Input size="md" placeholder="Medium input" />
<Input size="lg" placeholder="Large input" />

States

Disabled

Disabled State

View Code

<Input disabled placeholder="Disabled input" />

Input Types

Input Types

View Code

<Input type="text" placeholder="Text input" />
<Input type="email" placeholder="Email input" />
<Input type="password" placeholder="Password input" />
<Input type="number" placeholder="Number input" />

Props

Name	Type	Default	Description
variant	'default' | 'error' | 'success'	'default'	Visual style variant indicating validation state
size	'sm' | 'md' | 'lg'	'md'	Size of the input field
type	string	'text'	HTML input type attribute (text, email, password, number, etc.)
placeholder	string	-	Placeholder text displayed when the input is empty
disabled	boolean	false	Whether the input is disabled
className	string	-	Additional CSS classes to apply

The Input component also accepts all standard HTML input attributes (excluding the native size attribute, which is replaced by the component’s size prop).

Usage Examples

Login Form

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <form onSubmit={handleSubmit}>
      <div className="space-y-4">
        <div>
          <label htmlFor="email" className="block text-sm font-medium mb-1">
            Email
          </label>
          <Input
            id="email"
            type="email"
            placeholder="[email protected]"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
        <div>
          <label htmlFor="password" className="block text-sm font-medium mb-1">
            Password
          </label>
          <Input
            id="password"
            type="password"
            placeholder="Enter your password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <Button type="submit" fullWidth>
          Sign In
        </Button>
      </div>
    </form>
  );
}

With Validation

function ValidatedInput() {
  const [value, setValue] = useState('');
  const [error, setError] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const val = e.target.value;
    setValue(val);

    if (!val.includes('@')) {
      setError('Please enter a valid email');
    } else {
      setError('');
    }
  };

  return (
    <div>
      <Input
        type="email"
        placeholder="Enter email"
        value={value}
        onChange={handleChange}
        variant={error ? 'error' : value ? 'success' : 'default'}
      />
      {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
    </div>
  );
}

Search Input

function SearchBar() {
  return (
    <div className="relative">
      <Input
        type="search"
        placeholder="Search..."
        size="lg"
        className="pl-10"
      />
      <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
    </div>
  );
}

Accessibility

The Input component follows WAI-ARIA best practices:

• Uses semantic <input> element
• Supports all native input attributes including aria-label and aria-describedby
• Visual variants communicate state but should be paired with text for screen readers
• Focus visible states for keyboard users
• Disabled state properly disables interaction and announces to assistive technology

Keyboard Support

Key	Action
Tab	Moves focus to the input
Shift + Tab	Moves focus to previous focusable element

Best Practices

• Always pair inputs with visible <label> elements or aria-label
• Use the error variant alongside visible error messages
• Use the success variant to confirm valid input
• Provide clear placeholder text that hints at expected format

Related Components

• Button - Interactive button for actions
• Textarea - Multi-line text input
• Select - Dropdown selection input
• Checkbox - Boolean checkbox input