Field

PreviousNext

Form field composition for labels, supporting copy, animated errors, success feedback, and input groups.

Used for workspace notifications.

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/field.json

Usage

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

<Field invalid={Boolean(error)}>
  <FieldLabel htmlFor="email" required>Email</FieldLabel>
  <input id="email" aria-invalid={Boolean(error)} />
  <FieldDescription>Used for account notices.</FieldDescription>
  <FieldError error={error} />
</Field>

FieldError enters with a short fade and slide and sets role="alert". FieldMessage reserves a stable support line and swaps description, success, or error content without shifting neighboring grid fields.

Also exported: FieldSuccess, InputGroup, InputGroupAddon, InputGroupButton, and fieldVariants.

FormsInput