Field

A labelled text control with its hint or error.

import { Field } from '@zitdevs/ui';

Examples

Full name*

Email*

Only to reply to this request.

Email*

Enter a valid email, such as [email protected].

Teléfono (opcional)

Tell us about the project

Country

A search box, its label off screen, at the larger size:

Search resources

On a dark band only the label changes; the control stays raised:

Work email

<Field
  id="email"
  type="email"
  label="Email"
  requirement="required"
  autoComplete="email"
  hint="Only to reply to this request."
  error={errors.email}
/>

A form that holds the text passes value and onChange, which reach the control as on any input.

Props

Prop	Type	Default	Notes
id	string	required	The control’s id.
name	string	id	Submitted under it.
label	string	required
type	'text' | 'email' | 'tel' | 'url' | 'date' | 'search' | 'textarea'	'text'	textarea renders a <textarea>; search adds the magnifier.
defaultValue	string	—	The text it starts with, such as what a failed POST sent back.
requirement	'none' | 'required' | 'optional'	'none'	required sets the native required; optional adds “(optional)”.
hint	string	—	Describes the control.
error	string	—	Replaces the hint and sets aria-invalid.
messageId	string	`${id}-message`	The hint or error line’s id, for a form whose ids are fixed.
disabled	boolean	false
size	'md' | 'lg'	'md'	Minimum height 46px / 48px.
hideLabel	boolean	false	The label stays the name, off screen.
rows	number	5	Textarea only.
surface	'light' | 'dark'	'light'	dark sets the label in white on a dark band.
labels	Partial<FieldLabelLabels>	English	The label’s { optional }. es.fieldLabel.
ref	Ref<HTMLInputElement | HTMLTextAreaElement>	—	The control.
className	string	—	Placement, on the wrapper.
anything else	<input> attributes	—	On the control: placeholder, autoComplete, minLength, onChange…

Exported types: FieldProps, FieldType. The control’s classes are fieldControl, from @zitdevs/ui, for a control of your own that should look the same.

Accessibility

• The label names the control through for; the hint or error describes it through aria-describedby; an error sets aria-invalid. None of them is set without a reason: no message, no aria-describedby.
• The wiring wins over what you pass: an aria-invalid of yours cannot hide an error.
• The focus ring shows on every focus, since a text field is always focus-visible when focused.
• A search box drops WebKit’s clear button: the page that offers a search offers its own way to clear it, and the native one is unreachable by keyboard.
• The edge is border-control, 3:1 on a raised card, where nothing else would show the field.

Without JavaScript

It needs none: a native input in a form. It renders as a Server Component.

Theming

fieldControl: surface-raised, ink, border-control, muted placeholders, primary and the focus ring on focus, danger and the danger ring when invalid, surface-sunken and subtle when disabled. The label and message take theirs from FieldLabel and FieldMessage.

Use instead: a choice from a list → Select.