Form Field

Components/Input and selection

ImplementationHTML/CSS/JSArk/ZagReact · shadcn/Base UIAngular — planned

Composes label, control, help, and error content into an accessible field.

Status

Beta

Distribution

Source via shadcn

DesignUsageImplementationAccessibility

Documentation sectionDesignUsageImplementationAccessibility

Design

Functional preview

Loading functional preview…

Open interactive playground

Explore anatomy and visual states

Anatomy

1. Label
2. Control slot
3. Optional description
4. Optional error message

Variants and states

• error
• no-helper
• no-label

Open the complete design reference

Usage

When to use

• a form control needs context, help, or validation.

When not to use

• the host component already provides the complete field composition.

React composition

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

<Field>
  <FieldLabel htmlFor="email">E-mail</FieldLabel>
  <Input id="email" name="email" />
  <FieldDescription>Use seu e-mail corporativo.</FieldDescription>
</Field>

Implementation

Installation

Configure the namespace once in the React integration guide.

npm

npx shadcn@latest add @tis/field @tis/input

pnpm

pnpm dlx shadcn@latest add @tis/field @tis/input

yarn

yarn dlx shadcn@latest add @tis/field @tis/input

bun

bunx --bun shadcn@latest add @tis/field @tis/input

Public contract

Registry item

@tis/field

Distribution

Source copied into the application

Status

Beta

Technical architecture

Provider

React composition

Provider role

Native or composition

Behavioral architecture

Base UI

CSS

ds-tis/css

Open registry JSON

Inspect distributed source

Accessibility

Semantics and behavior

Associate label, helper, and error with the control using IDs; invalid state also requires aria-invalid on the control.

Consumer responsibility

• provide contextual accessible names and descriptions;
• preserve keyboard behavior, focus visibility, and semantic HTML;
• test real content, flow, and contrast in the application.

Validation evidence

Installed in the permanent React/Vite consumer and covered by production build, browser, responsive, and Axe checks.

Open stable accessibility guidance