Field

Usage

The box carries the border and the focus ring, so a field with a prefix or unit shows one ring, never one around the inner input. Put beta-field on a native input and keep its name, value, limits and analytics intent there. Pair it with a label that points at its id.

type input type

The input’s type: text, email, tel, number or search. Number hides the spinners. Add code for a monospace value.

unit, prefix string

Shown inside the box after or before the value, and read with the field.

invalid bool

Marks the box danger and sets aria-invalid. The reason belongs beside the field.

Source Components/Beta/Field/