Field

Groups a label, control, and hint or error in one vertical field.

Preview

Name

As it appears on the invoice.

In action

Fee

Fixed fee

The number on the cover is the number on the invoice.

When to use

Use it for

Any control with a label plus a hint or an error, including NativeSelect, Textarea, Slider, and InputOTP.
Form layouts where every field stacks the same way.

Not for

A lone Input; its label, hint, and error props do the same job.
Grouping several controls; use a fieldset with a legend.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Field, FieldError, FieldHint, FieldLabel, Input } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/field.

2. Vendor the source

npx @noorddev/vlak-cli add field

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/field.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Field, FieldError, FieldHint, FieldLabel, Input } from "@noorddev/vlak-react";

<Field>
  <FieldLabel htmlFor="name">Name</FieldLabel>
  <Input plain id="name" />
  <FieldHint>As it appears on the invoice.</FieldHint>
</Field>

<Field>
  <FieldLabel htmlFor="iban">IBAN</FieldLabel>
  <Input plain id="iban" />
  <FieldError>Check the country code.</FieldError>
</Field>

Props

Field

Stack: label, control, hint or error. The hint and error describe the control.

Also accepts HTMLAttributes<HTMLDivElement>.

FieldError

Also accepts HTMLAttributes<HTMLParagraphElement>.

FieldHint

Also accepts HTMLAttributes<HTMLParagraphElement>.

FieldLabel

Also accepts LabelHTMLAttributes<HTMLLabelElement>.

Accessibility

Field passes the ids of a rendered FieldHint and FieldError to the control through aria-describedby.
A rendered FieldError sets aria-invalid on the control and has role="alert".
FieldLabel is a native <label>; pass htmlFor with the control's id.

Markup

<div class="rs-field"><label class="rs-field-label" for="invoice-name">Name</label><input class="rs-input rs-input-full" id="invoice-name" aria-describedby="invoice-name-hint" /><p class="rs-field-hint" id="invoice-name-hint">As it appears on the invoice.</p></div>

Classes

.rs-field.rs-field-label.rs-field-hint.rs-field-error

Depends on

/input