ComponentsForm
Field
A form field wrapper composing label, description, and error display.
Default
Your full name as it appears on your ID.
Sizes
Input and Textarea accept a size prop (sm, md, lg) that controls height, padding, and border-radius.
With Error
Please enter a valid email address.
Horizontal
With Textarea
Maximum 200 characters.
Installation
npx visor add fieldThis copies two files into your project:
components/ui/field/field.tsx— the componentcomponents/ui/field/field.module.css— the styles
Usage
import { Field, FieldLabel, FieldDescription, FieldError } from '@/components/ui/field/field';
import { Input } from '@/components/ui/input/input';
<Field>
<FieldLabel htmlFor="name">Name</FieldLabel>
<Input id="name" placeholder="Jane Doe" />
<FieldDescription>Your full name as it appears on your ID.</FieldDescription>
</Field>API Reference
FieldProps
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'vertical' | 'horizontal' | 'vertical' | Layout direction of the field group. |
className | string | — | Additional CSS class names to merge onto the element. |
FieldErrorProps
| Prop | Type | Default | Description |
|---|---|---|---|
errors | Array<{ message?: string } | undefined> | — | Array of error objects to display. Duplicates are deduplicated by message. |
children | React.ReactNode | — | Custom error content. Takes precedence over the errors prop. |
Sub-components
| Component | Element | Purpose |
|---|---|---|
Field | <div> | Wrapper grouping label, input, description, and error |
FieldLabel | <label> | Semantic label linked to the input via htmlFor |
FieldDescription | <p> | Helper text providing additional context for the field |
FieldError | <div> | Error message container with role="alert" for live announcements |
Accessibility
Fieldrenders as a<div>— pair withFieldsetfor groups of related fieldsFieldLabelrenders a semantic<label>— always usehtmlFormatching the control'sidFieldDescriptionrenders with a generatedidthat can be referenced byaria-describedbyon the inputFieldErrorrenders withrole="alert"so screen readers announce errors immediately- Set
aria-invalid="true"on the input when showing aFieldErrorto communicate the invalid state