Forms

Field

Label, control, and error or hint in one column. It wires the control for screen readers: id, aria-describedby and aria-invalid.

view .md

Preview

Installation

terminal

bash

npx @entrepta/cli@latest add field

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

field.tsx

tsx

import { Field } from "@/components/entrepta/field"
import { Input } from "@/components/entrepta/input"
import { Textarea } from "@/components/entrepta/textarea"

<Field id="email" label="email" required hint="we never share it">
  <Input type="email" required />
</Field>

<Field id="message" label="message" error={errors.message}>
  <Textarea />
</Field>

Props

Prop	Type	Default	Description
id	string	-	The control's id. Error and hint ids derive from it
label	ReactNode	-	Mono label with a ◆
icon	Icon \| ReactElement	-	A Phosphor icon, or an icon element, in place of the label's ◆
required	boolean	-	Adds a brand *. Put required on the control too
error	ReactNode	-	Replaces the hint, announced as an alert
hint	ReactNode	-	Muted line under the control