Field

Controls in a field

Input, select and textarea all work inside a field.

<KbField label="Subject" htmlFor="s" help="One line."><KbInput id="s" /></KbField>
<KbField label="Team" htmlFor="t"><KbSelect id="t">…</KbSelect></KbField>
<KbField label="Note" htmlFor="n"><KbTextarea id="n" /></KbField>

Help and error wiring

Clear the box to see the error. The error replaces the help, is announced as an alert, sets aria-invalid on the input and is linked with aria-describedby. Say what happened and what to do; don't use red alone.

<KbField label="Workspace name" htmlFor="ws" help="Shown to your team." error={name.trim() === "" ? "Enter a workspace name so your team can find it." : undefined}>
  <KbInput id="ws" value={name} onChange={…} />
</KbField>

When to use

• Use a field for every form control that needs a visible label, help text or an error.
• Keep the label short and in sentence case. Put the rule in help, not in the label.
• Write errors that say what happened and what to do, beside the control. Move focus to the first error after a failed save.
• Use tight inside a row, popover or table where the bottom margin would break the layout.

Import

import { KbField, KbInput, KbTextarea } from "@/components/ui/KbField";

<KbField label="Workspace name" htmlFor="ws" help="Shown to your team." error={error}>
  <KbInput id="ws" value={name} onChange={…} />
</KbField>

Props

Keyboard and screen readers

• The label is a real label bound with htmlFor.
• KbInput, KbSelect, KbTextarea and KbTextField read the field's context: aria-describedby points at the help or error, and aria-invalid is set while there is an error.
• The error has role alert, so it is read out when it appears.
• Meaning is never colour alone: the error is words.