FormField

One question of a form built from definitions, in the control its definition asks for: a Field or a Select.

import { FormField, type FormFieldSpec } from '@zitdevs/ui';

Examples

City*

Where you are based.

Role (optional)

Choose oneFrontendBackendDesign

Choose a role.

const city: FormFieldSpec = {
  key: 'city',
  label: 'City',
  control: 'input',
  inputType: 'text',
  required: true,
  full: false,
  autoComplete: 'address-level2',
  maxLength: 300,
};

<div className="grid gap-5 md:grid-cols-2">
  <FormField field={city} prompt="Choose one" defaultValue={sent.city} error={errors.city} />
</div>;

The ids come from the definition’s key: zd-f-<key> for the control, zd-h-<key> for its hint and zd-e-<key> for its error. fieldId, hintId and errorId from @zitdevs/ui build them, and errorSummaryItems turns a server’s errors into Alert’s rows, each linked to its control:

import { Alert, errorSummaryItems } from '@zitdevs/ui';

<Alert
  tone="error"
  title="Check 2 fields before sending"
  items={errorSummaryItems(
    errors,
    (key) => labels[key],
    (code) => messages[code],
  )}
/>;

Props

Prop	Type	Default	Notes
field	FormFieldSpec	required	The question, as the page and the server both read it.
prompt	string	required	A select’s empty first answer, so an optional one can be undone.
defaultValue	string	—	The answer it starts with, such as the one a failed POST sent.
error	string	—	The server’s message; replaces the hint.
labels	Partial<SelectLabels>	English	The control’s words. es.select.
className	string	—	Placement, on the wrapper.
anything else	<div> attributes	—	On the wrapper.

FormFieldSpec: key, label, control ('input' | 'select' | 'textarea'), inputType ('text' | 'email' | 'url' | 'date'), required, full (spans both columns from md), autoComplete, and optionally hint, placeholder, options, optionLang (an answer’s language, by value) and maxLength.

Exported types: FormFieldProps; from the helpers, FormFieldSpec, ErrorSummaryItem.

Accessibility

• What Field and Select guarantee.
• A question that is not required says “(optional)”.
• The select’s prompt is an enabled empty answer, unlike Select’s placeholder: an optional question can be answered and taken back.
• The fixed ids let an error summary link each problem to its control.

Without JavaScript

It needs none, and never makes a select searchable. It renders as a Server Component.

Theming

Its control’s. The grid, one column and two from md, is the caller’s.