field

Higher-level form field wrapper with label, description, and validation error.

status: stable js: none support: baseline

Preview

Markup

<div class="field" data-required="true"><label class="field-label" for="X">L</label><div class="field-control"><input class="input" id="X" required></div><p class="field-description">D</p><p class="field-error"><svg>…</svg>E</p></div>

Install

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/field.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add field

Accessibility

Error shows via :user-invalid OR data-invalid/aria-invalid; wire aria-describedby

Classes

.field .field-label .field-control .field-description .field-error .field-group

Dependencies

base/tokens label