Field

Field is a native web component that arranges, in a vertical stack, the label, the control (default slot), the description, and the error message of a form field. Use it to standardize the structure and spacing of any input, select, or textarea. When the error attribute is set, the invalid style is applied and the error message replaces the description.

Preview

<pura-field label="Email" description="We'll use it to send the confirmation.">
  <pura-input type="email" placeholder="you@example.com"></pura-input>
</pura-field>

<pura-field label="Password" error="The password must be at least 8 characters.">
  <pura-input type="password" placeholder="********"></pura-input>
</pura-field>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/field.js"></script>

import "./pura/lib/field.js";