Field

A field combines a control with the text that explains it. Its label names the control, its description says what the value is for, and its error names what users need to correct. Several fields stack in a group, and a field set gathers related fields under one legend.

UsageCopy Anchor Link

import {
	Field,
	FieldDescription,
	FieldLabel,
} from "@biem/ui/components/ui/field";
import { Input } from "@biem/ui/components/ui/input";

export function FieldDefault() {
	return (
		<div className="w-full max-w-sm">
			<Field>
				<FieldLabel htmlFor="item-number">Item number</FieldLabel>
				<Input id="item-number"/>
				<FieldDescription>The item number is printed on the shelf label.</FieldDescription>
			</Field>
		</div>
	);
}

ExamplesCopy Anchor Link

VerticalCopy Anchor Link

Values that users type, such as an address or a note, need the full width of the form, and users read the label before they begin. A field arranges its label, control and description in this order by default, and orientation set to "vertical" states it explicitly.

HorizontalCopy Anchor Link

Switches and checkboxes only turn a setting on or off and need little room. With orientation set to "horizontal", label and control share one row, so a list of settings stays short and users scan it quickly.

Horizontal with DescriptionCopy Anchor Link

Before users turn on a setting, they sometimes need to know what it will cause. Inside FieldContent, the label and the description form one column beside the control, so the explanation stays next to the decision it belongs to.

ResponsiveCopy Anchor Link

The same form can appear in a narrow side panel and on a wide page. Set to "responsive", orientation stacks the parts of a field while space is short and places them in one row once the surrounding FieldGroup is at least 28rem wide. The field responds to the width of its group rather than the screen, so it adapts wherever users open the form.

GroupCopy Anchor Link

Most tasks ask users for more than one value. Within a FieldGroup, fields stack with even spacing, so users work through them in order and see where one field ends and the next begins.

LegendCopy Anchor Link

Longer forms divide into sections, and users find their way by the name of each one. A FieldSet gathers the related fields under a FieldLegend, and with variant set to "legend", which is the default, that name ranks above the labels of the fields and heads the section.

Label LegendCopy Anchor Link

Sometimes a set of options answers a single question and forms no section of its own. Here, variant set to "label" gives the legend the rank of a field label, so the question and its options read as one field.

With SeparatorCopy Anchor Link

Partway through a form, the topic of the fields can change. Placed between them, FieldSeparator marks the boundary, so users notice where one topic ends and the next begins without a heading for each part.

Separator with TextCopy Anchor Link

Some forms accept either of two inputs, and users fill in whichever they have at hand. Content passed as children names how the fields on either side of the separator relate, so users know at once that one of them is enough.

Choice CardCopy Anchor Link

Options with real consequences need a sentence of explanation before users can weigh one against the other. Wrapped around a Field, FieldLabel makes each option a card that responds as a whole, so a click anywhere on it selects the option. FieldTitle names the option there, where a label does not fit.

DisabledCopy Anchor Link

A value can be fixed for the moment, for example because another setting determines it. With disabled on the control and data-disabled on the field, the control accepts no input and its label is marked as unavailable along with it, so users still read the value without trying to change it.

InvalidCopy Anchor Link

When a value breaks a rule, users need to learn what to correct right where they entered it. Marked with data-invalid, the field takes on the error state, and aria-invalid on the control exposes that state to assistive technology. FieldError then names what to correct, and assistive technology announces it as an alert.

Error ListCopy Anchor Link

Validation often finds several problems in one value at the same time. Given an array through errors, FieldError lists every message and shows a repeated message only once, so users fix the value in one pass instead of one problem after another.

API ReferenceCopy Anchor Link

FieldCopy Anchor Link

FieldContentCopy Anchor Link

FieldContent stacks the label and the description in one column beside the control. It renders a div and has no props of its own.

FieldLabelCopy Anchor Link

FieldTitleCopy Anchor Link

FieldTitle names a field where a label does not fit, such as inside a choice card. It renders a div and has no props of its own.

FieldDescriptionCopy Anchor Link

FieldDescription says what a field or a field set is for. It renders a p and has no props of its own.

FieldErrorCopy Anchor Link

FieldGroupCopy Anchor Link

FieldGroup stacks fields in a column with even spacing and is the container whose width a responsive field follows. It renders a div and has no props of its own.

FieldSeparatorCopy Anchor Link

FieldSetCopy Anchor Link

FieldSet gathers related fields under one legend. It renders a fieldset and has no props of its own.

FieldLegendCopy Anchor Link