Components

Field

Label, control, description and error layout on Base UI Field and Fieldset; errors shown by a 2px ink rule and an ! icon.

Headline

Shown on the front page. Keep it under 70 characters.

Install

bash

npx shadcn add @eloquent/field

Usage

tsx

import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field";

<Field invalid={!!error}>
  <FieldLabel>Headline</FieldLabel>
  <Input />
  <FieldDescription>Shown on the front page.</FieldDescription>
  <FieldError errors={[error]} />
</Field>

States

Byline

Author

As printed under the headline.

Desk

Choose a desk.

Optional

Edition

Set by the night editor.

State	Treatment
Invalid	2px ink left rule, ink ! icon and a Barlow 600 message
Disabled	Label and description in halftone, `cursor-not-allowed`
Focus	2px ink outline on the control

Keyboard

Key	Action
Tab / Shift+Tab	Move between the field controls
Enter (in a form)	Submits; Base UI validates and moves the error onto the field

Vietnamese

Tiêu đề

Hiển thị trên trang nhất. Không quá 70 ký tự.

Ink adaptation

Errors are never red: a 2px ink rule, an ink icon and a message. Descriptions are Source Serif 14px in muted-foreground; legends open with the 3px heavy rule in Playfair 900; separators are 1px hairlines. Built on Base UI Field and Fieldset.