Input

shadcn/ui input on DESIGN.md tokens. Heights 32 / 40 / 48 match the sm / default / lg buttons so a form row lines up. Surface fill, border-strong edge, 4px radius. Visible label above, helper or error below the field it belongs to.

import { Input } from "@stocklots/ui-components/components/input";

<Input size="sm" placeholder="Search lots" />

Sizes

sm 32 · default 40 · lg 48, each beside the matching button.

Label, helper, error

Validate on blur; the error sits under its field as a FieldError (warning ink behind a triangle glyph) and the field is aria-invalid, edge and ring in warning.

Spaces are fine; we strip them.

Read-only and disabled

Read-only is filled, still selectable. Disabled fades, keeps pointer events for a tooltip, and says why beneath.

Set by the company profile.

Sign-up form

The whole field system on one form: FieldSet and FieldLegend per section, FieldGroup for 20px between fields, required marks on the label, helper text under the control, a Select for the country, a horizontal Field for each checkbox, and one FieldError where validation has spoken.

Account

Order updates and payout notices go here.

At least 12 characters. A passphrase works well.

Company

Optional now; we verify it with VIES before your first lot goes live.

Preferences

What sold and what's pending, every Monday at 08:00.

Textarea

Same recipe on a multi-line field: grows with its content from 80px, first line at the 40px Input height.