Input

Text input field for forms. Supports labels, placeholders, error states, and icons.

Import

import { Input } from '@kikumi3n/ui';

Usage

<Input placeholder="Enter your email" />
<Input label="Username" />
<Input type="password" label="Password" />

With Label

<Input label="Email Address" placeholder="name@example.com" />

Error State

<Input
  label="Email"
  error="Please enter a valid email address"
  value="invalid"
/>

Disabled

<Input label="Disabled Input" disabled value="Cannot edit" />

Sizes

<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium (default)" />
<Input size="lg" placeholder="Large" />

API

Prop	Type	Default	Description
label	string	—	Input label text
error	string	—	Error message (shows error styling)
size	'sm' | 'md' | 'lg'	'md'	Input size
leftIcon	ReactNode	—	Icon inside input (left)
rightIcon	ReactNode	—	Icon inside input (right)
fullWidth	boolean	true	Full width of container

Also accepts all standard <input> HTML attributes (type, placeholder, disabled, onChange, etc.).

With Form

import { Input, Button, Stack } from '@kikumi3n/ui';

function LoginForm() {
  return (
    <form>
      <Stack gap={4}>
        <Input label="Email" type="email" required />
        <Input label="Password" type="password" required />
        <Button type="submit">Sign In</Button>
      </Stack>
    </form>
  );
}

Accessibility

• Label is associated via htmlFor / id automatically
• Error messages linked via aria-describedby
• Proper aria-invalid when error prop is set
• Supports all standard input ARIA attributes