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.

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.

Code

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

States

Disabled

Code

<Input disabled placeholder="Disabled input" />

Input Types

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

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="you@example.com"
            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

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

On this page