← →

Label

pura-label is a native web component that renders an accessible form label. Use it to identify input fields: by setting the "for" attribute to the control's id, clicking the text focuses the field and, for checkboxes, radios, or switches, also toggles them, replicating the behavior of the native label element.

Preview

<div style="display:flex;flex-direction:column;gap:8px;max-width:320px">
  <pura-label for="email">Email</pura-label>
  <input id="email" type="email" placeholder="you@example.com" />

  <div style="display:flex;align-items:center;gap:8px;margin-top:8px">
    <input id="termos" type="checkbox" />
    <pura-label for="termos">I accept the terms of use</pura-label>
  </div>
</div>

Attributes

Attribute	Type	Default	Description
`for`	string	—	Id of the control the label describes; clicking it focuses and (when applicable) activates that control.

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

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

JavaScript

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

Slots

default