Components

Field

The wrapper that wires label, control, help text, error and counter by ids for any form control.

Storybook: Storybook
Source: Source

When to use

Field binds a label, help text and error to a control that has no ready-made field in the library: a custom input, a third-party control, or a plain <input> through Field.Control.

When not to use

For text entry: TextInput wires its label, help text and error itself.
To group several controls: Groups use fieldset and legend; Field is for one control.
For a label outside a form: When you only need text, use Text.

Anatomy

Field label

This field cannot be empty.

Field label

Help text goes here.

This field cannot be empty.
Enter at least 3 characters.

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

export default function Errors() {
  return (
    <div className="flex max-w-80 flex-col gap-lg">
      <Field label="Field label" error="This field cannot be empty.">
        <Field.Control />
      </Field>
      <Field label="Field label" description="Help text goes here." error={['This field cannot be empty.', 'Enter at least 3 characters.']}>
        <Field.Control />
      </Field>
    </div>
  );
}

Label: label; the label-md text style, with the necessity marker when needed.
Control: Field.Control, or your own control wired through render.
Help text: description; body-sm, color-text-subtle.
Error: error; body-sm, color-text-danger, a bulleted list for several messages.
Counter: an optional Field.Counter; aligned to the end.

Behaviour

When error is set or invalid is on, the control gets aria-invalid="true".
aria-describedby points to the help text first, then the error.
The error is not a live region: after a failed submit, focus moves to the error summary or the first invalid field, and the message is read with the field.
The error text fades in and drops 4 px with motion.fieldMessage; it never shakes.
Field.Counter does not block typing; set maxLength on the control to block.

Guidelines

Give every field a visible label; a placeholder does not replace it.
Use one marking convention in a form: mark the minority.
The error message says what to do: “Enter at least 3 characters.”
Show the counter only on fields that have a limit.

Content

The label is a short noun phrase; do not end it with a colon.
The error message is a full sentence and ends with a full stop.

Turkish	English
zorunlu	required
isteğe bağlı	optional
2 karakter kaldı	2 characters left
2 karakter fazla	2 characters too many

TextInput: the text input built on Field.
Provider: the language of the necessity and counter strings.
Text: text outside forms.