Components

Input

Single-line text field as a 1px ink form line; invalid is a 2px rule; 44px high.

Headline

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

Install

bash

npx shadcn add @eloquent/input

Usage

tsx

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

<Field>
  <FieldLabel>Headline</FieldLabel>
  <Input placeholder="Pragmatic components" />
  <FieldDescription>Shown on the front page.</FieldDescription>
</Field>

Outside a Field, give the input an accessible name with a <label> or aria-label.

States

Author

As printed under the headline.

Desk

Choose a desk.

Edition

Attachment

State	Treatment
Default	Paper fill, ink text, 1px ink bottom rule
Hover	No change; controls change on press or focus only
Focus	2px ink outline, 2px offset
Invalid	2px ink bottom rule; `Field` adds the ink ! icon and message
Disabled	Halftone text and rule, `cursor-not-allowed`

Keyboard

Key	Action
Tab / Shift+Tab	Move focus to and from the input (disabled inputs are skipped)
Type	Edit the value
Enter	Submits the enclosing form

Vietnamese

Tiêu đề

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

Ink adaptation

Upstream shadcn's rounded box, border, shadow, focus ring glow and red invalid state are removed. The field is one 1px ink bottom rule, 44px high, set in Barlow. Built on Base UI Input, so it works with Field validation and Form out of the box.