Field

Every text, select or file control: it gets a visible label.

import { Field, Input } from "@hackcove/ui";

<Field label="Display name" htmlFor="do-label-name" hint="Shown on your reviews.">
  <Input id="do-label-name" />
</Field>

import { Input } from "@hackcove/ui";

<Input placeholder="Display name" />

import { Field, Input } from "@hackcove/ui";

<Field
  label="Display name"
  htmlFor="do-error-name"
  hint="Shown on your reviews."
  error="Pick a shorter name."
>
  <Input id="do-error-name" defaultValue="A very long display name indeed" />
</Field>

import { Field, Input } from "@hackcove/ui";

<Field label="Display name" htmlFor="dont-error-name" hint="Pick a shorter name.">
  <Input id="dont-error-name" defaultValue="A very long display name indeed" />
</Field>

• Wrap every Input, Textarea, Select and FileDrop in a Field; the label is always visible, and htmlFor is the control's id.
• A hint is the one line of help under the control.
• A validation message is error, not hint: it replaces the hint, in red.
• Inside a FormGrid a Field takes one column; span="full" runs it across both.
• A Checkbox and a DatePicker draw their own label; do not wrap them in a Field.

• The label is a real <label> tied to the control by htmlFor, so clicking the text focuses the control and a screen reader reads it as the control's name.
• An error is a <p role="alert">, so it is announced when it appears. The hint is plain text.
• Field does not add aria-describedby or aria-invalid to the control.