Docs/Field

Field

Form field wrapper for labels, inputs, and validation messages.

Usage

tsx

1import { Field, Input } from '@storm-ds/ui'
2
3<Field label="Email" htmlFor="email" required>
4  <Input id="email" type="email" placeholder="you@example.com" />
5</Field>

Basic

tsx

1<Field label="Name" htmlFor="name">
2  <Input id="name" placeholder="John Doe" />
3</Field>

Required Field

Email*

tsx

1<Field label="Email" htmlFor="email" required>
2  <Input id="email" type="email" />
3</Field>

With Description

Username

This will be your public display name.

tsx

1<Field
2  label="Password"
3  htmlFor="password"
4  description="At least 8 characters"
5>
6  <Input id="password" type="password" />
7</Field>

With Error

Password

Password must be at least 8 characters

tsx

1<Field
2  label="Username"
3  htmlFor="username"
4  error="Username already taken"
5>
6  <Input id="username" />
7</Field>

Props

Prop	Type	Default	Description
label	string	-	Field label text
htmlFor	string	-	ID of input for label association
required	boolean	false	Shows required asterisk
error	string	-	Error message text
description	string	-	Helper text below field
children	React.ReactNode	-	Input component(s)
className	string	-	Custom classes

Use with AI

Create a Next.js component using Storm UI's Field for form field wrappers. Import: `import { Field, Input } from '@storm-ds/ui'`. Props: label (string), htmlFor (input ID), required (boolean), error (string), description (string), children (input), className. Wraps input with label, manages spacing, shows required asterisk, displays descriptions and error messages. Use for consistent form layouts. Label associates with input via htmlFor. Error message shows in destructive red. Description in muted text. Example: `<Field label="Email" htmlFor="email" required><Input id="email" /></Field>`, `<Field label="Name" description="Your full name"><Input /></Field>`, `<Field label="Username" error="Already taken"><Input /></Field>`

PasswordInput

Alert