Docs/Input

Input

Text input with Storm's border signature. 3 sizes.

Usage

tsx

1import { Input } from '@storm-ds/ui'
2
3<Input placeholder="Enter text..." />

Sizes

tsx

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

With Label

tsx

1<Label htmlFor="email">Email</Label>
2<Input id="email" type="email" placeholder="you@example.com" />

Disabled

tsx

1<Input disabled placeholder="Disabled input" />

Error

Please enter a valid email address.

tsx

1<Input error placeholder="Invalid email" />

Types

tsx

1<Input type="text" placeholder="Text" />
2<Input type="email" placeholder="Email" />
3<Input type="password" placeholder="Password" />
4<Input type="number" placeholder="Number" />

Props

Prop	Type	Default	Description
size	'sm' \| 'md' \| 'lg'	'md'	Input size
className	string	-	Custom classes
error	boolean	false	Shows destructive border and ring

Use with AI

Create a Next.js component using Storm UI's Input. Import: `import { Input } from '@storm-ds/ui'`. Sizes: sm, md, lg. Uses border Storm signature. Use `error` prop to show a destructive red border and ring for validation states. Supports all native input attributes (type, placeholder, disabled, etc.). Example: `<Input type="email" placeholder="you@example.com" />`, `<Input error placeholder="Invalid email" />`

Button

Textarea