Field

Default

Full name

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.

Small

Medium

Large

With Error

Please enter a valid email address.

Horizontal

Username

With Textarea

Bio

Maximum 200 characters.

Theming

A theme sets the label's size, case, tracking and colour through the field component tokens, in both densities. See Component tokens.

components:
  field:
    label-font-size: "9px"
    label-text-transform: uppercase
    label-letter-spacing: "0.12em"

Installation

npx visor add field

This copies two files into your project:

components/ui/field/field.tsx — the component
components/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

Field renders as a <div> — pair with Fieldset for groups of related fields
FieldLabel renders a semantic <label> — always use htmlFor matching the control's id
FieldDescription renders with a generated id that can be referenced by aria-describedby on the input
FieldError renders with role="alert" so screen readers announce errors immediately
Set aria-invalid="true" on the input when showing a FieldError to communicate the invalid state

Field

On this page