Field | Lime design system

Examples

Checked when you leave

With a hint

Goal name

Shown on your profile and in search.

An error in place of the hint

Invite email

Add a full email, like maya@example.com.

Control

Goal name
Inputdefault
Description
Textarea
Pay from
Select

States

Goal name
Shown on your profile.
rest
Goal name
Shown on your profile.
focus-visible
Payment handle
Use letters and numbers only.
invalid
Workspace
Set by your plan.
disabled

Usage

When to use it

Use: Any control that collects a value in a form.
Use: A control that can show an error the person has to fix.
Not for: A single control with its own visible label, such as a switch row. Wrap it in a label. Use Switch.
Not for: A search box in a toolbar. Use aria-label. Use Input.

Rules

12 rules

Must: Use FieldLabel, not a loose label; it sets the for and id pair that names the control. Because without the pair a screen reader announces an unnamed text box.
Should: Set validationMode="onBlur" and a validate function; do not check on every key.
Should: Show the error and drop the hint when invalid; Field renders both lines.
Must: Say what went wrong and what to do in the error, such as "Use at least 8 characters"; never "Invalid". Because "Invalid" names no fix, so the person retypes the same value.
Must: Keep what the person typed and mark the field; never clear a wrong value. Because a cleared field makes the person retype a whole IBAN to fix one digit.
Should: Label with a short noun in sentence case, not a question or capitals.
Never: Turn the label red for an error; the red belongs to the control edge and the message. Because the edge and FieldError already carry the red, so a red label reads as a second error.
Should: Cap a field with max-w-sm or a column; Field is w-full.
Must: Set name for form submission and server errors. Because without it the value is missing from FormData and server errors match no field.
Must: Set type, autoComplete and inputMode for what the field holds, such as email, tel, one-time-code or decimal. Because the phone then shows the right keyboard and the browser can fill the value.
Must: Put fields in a form with a type="submit" Button, so Enter in any field submits. Because keyboard and phone users expect Enter or Go to send the form.
Must: Move focus to the first invalid field after a failed submit. Because the error may be off screen, and a screen reader hears nothing until focus lands on it.

Accessibility

4 checks

: FieldLabel names the control; a click on it focuses the control.
: The control gets aria-invalid when invalid and aria-describedby for the hint and the error.
: The label, hint and error are not tab stops.
: The error is text under the control, so it survives forced colors.

Edge cases

6 edge cases

Long label and error: Both wrap; nothing is clipped.
Narrow to 160px: The column fits and the control shrinks.
Right to left: Label, hint and error align to the start edge.
No FieldLabel: The control has no name.
Async validate: Holds the old state until it resolves; note the wait in FieldDescription.
Error appears: No animation; the control moves down one line.

API

6 props

name: string
invalid: boolean
disabled: boolean default false
validate: (value, formValues) => string | string[] | null
validationMode: 'onBlur' | 'onChange' | 'onSubmit' default 'onBlur'
FieldError match: boolean | keyof ValidityState

Tokens

6 tokens

--text-sm: 14px
--fg: #0f0f0d
--weight-medium: 500
--fg-3: #6b6a63
--text-xs: 12px
--danger-text: #b42323

By Arlan Marat

141