All components (204)

Field parts

Fields · FieldLabel

What it is and when to use it

The pieces every field in the library is made of: FieldLabel, FieldHint and FieldError, plus the fieldClasses function for the root. They exist so that a custom field looks the same as the others.

When to use it

When no field in the library fits and one has to be assembled by hand with a native control (<input>, <select>…).
fieldClasses({ size, variant }) on the root, amset-field__control on the box and amset-field__entry on the input: that way it inherits sizes, variants, focus and error.
required on FieldLabel only renders the asterisk; what makes the field required is the control itself (required or aria-required).

When not to

If the field already exists: TextField, TextArea, NumberField, SearchField or Select come with the pieces in place and linked.

Keyboard: the pieces are not interactive; the keyboard is that of the control they accompany.

Accessibility: inside the library's fields, FieldLabel is a <label> linked to the control (pressing it moves focus to the field) and FieldHint and FieldError are linked through aria-describedby. Standalone they look the same, but they do not link themselves: in a custom field, the control must end up named (inside the label, or with aria-labelledby) and the help and the error linked with aria-describedby, giving them an id on an element that wraps them. The asterisk has aria-hidden: it does not enter the name. FieldError is only rendered when it receives the text in error, with its icon and a short transition; marking the control as invalid is the control's business (aria-invalid). hidden leaves the label for the screen reader only: never to save space.

Fine-tuning: --amset-field-label (label font) and --amset-field-description (help and error), --amset-field-required-display (with none the required asterisk is hidden; a screen reader still announces it), and the classes amset-field__label, amset-field__required, amset-field__hint and amset-field__error.

What it looks like

Order reference

It's in the order confirmation email

<div className={fieldClasses({})}>
  <FieldLabel required>Order reference</FieldLabel>
  <div className="amset-field__control">
    <MiControl className="amset-field__entry" />
  </div>
  <FieldHint>It's in the order confirmation email</FieldHint>
</div>

Props

Import it with import { FieldLabel } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	—
`hidden`	`boolean`	For the screen reader only. Never to save space.
`required`	`boolean`	—

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: