Wrapper component that enforces consistent form field layout with label, description, input, and error.
| Name | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | — | Label text for the field |
| description | string | — | Helper text displayed between label and input |
| error | string | — | Error message displayed below input |
| required | boolean | false | Shows required indicator (*) after label |
| optional | boolean | false | Shows "(optional)" text after label |
| tooltip | ReactNode | — | Tooltip content shown via help icon next to label |
| childrenrequired | ReactElement | — | Form control (Input, Select, Textarea) |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Label Gap | spacing.2 | 0.5rem | 8px gap from label to input (without description) | |
| Label-Description Gap | spacing.1.5 | 0.375rem | 6px gap from label to description | |
| Description-Input Gap | spacing.2 | 0.5rem | 8px gap from description to input | |
| Error Gap | spacing.2 | 0.5rem | 8px gap from input to error message | |
| Required Indicator | color.destructive | var(--destructive) | Red asterisk for required fields | |
| Optional Indicator | color.muted-foreground | var(--muted-foreground) | Muted text for optional label hint | |
| Help Icon | color.muted-foreground | var(--muted-foreground) | Tooltip trigger icon color | |
| Help Icon Size | spacing.3.5 | 0.875rem | 14px icon size |
Basic form field with label and input.
<FormField label="Email"> <Input type="email" placeholder="you@example.com" /> </FormField>
Add helper text below the label to provide context.
Choose a unique username for your profile
<FormField label="Username" description="Choose a unique username for your profile" > <Input placeholder="@username" /> </FormField>
Mark required fields with an asterisk.
<FormField label="Full Name" required> <Input placeholder="John Doe" /> </FormField>
Display validation errors below the input.
Must be at least 8 characters
Password needs at least 8 characters
<FormField label="Password" description="Must be at least 8 characters" error="Password is too short" required > <Input type="password" placeholder="••••••••" /> </FormField>
FormField works with any form control.
Tell us about yourself
<FormField label="Bio" description="Tell us about yourself">
<Textarea placeholder="Your bio..." maxLength={280} showCount />
</FormField>Show optional label for non-required fields.
<FormField label="Company" optional> <Input placeholder="Acme Inc." /> </FormField>
Add a help icon with tooltip for additional context.
<FormField label="API Key" tooltip="Your secret API key from the dashboard settings" required > <Input type="password" placeholder="sk-..." /> </FormField>
Combine tooltip with description for complex fields.
We'll send events to this endpoint
<FormField label="Webhook URL" description="We'll send events to this endpoint" tooltip="Must be a publicly accessible HTTPS URL that can receive POST requests" required > <Input type="url" placeholder="https://api.example.com/webhooks" /> </FormField>
A full form with validation. Note: constrain form width with max-w-sm (~384px) for optimal readability.
<form className="max-w-sm" onSubmit={handleSubmit}>
<FormField label="Email" required error={errors.email}>
<Input type="email" />
</FormField>
<FormField label="Password" required error={errors.password}>
<Input type="password" />
</FormField>
<FormField label="Company" optional>
<Input />
</FormField>
<Button type="submit">Create Account</Button>
</form>