Components
Input
A text input on the shared field base with native validation styling.
Inputs use the .input class and share the --field-* token family. Validation surfaces via
:user-invalid (after blur or submit, never while typing). Pair with a .field wrapper for
the label / hint / error layout.
Default
Loading components…
<div class="field"> <label class="field__label" for="f-name">Name</label> <input class="input" id="f-name" name="name" type="text" inputmode="text" placeholder="Ada Lovelace" autocomplete="name" autocapitalize="words" enterkeyhint="next" /></div><div class="field"> <label class="field__label" for="f-email">Email</label> <input class="input" id="f-email" name="email" type="email" inputmode="email" required placeholder="you@example.com" autocomplete="email" autocapitalize="off" spellcheck="false" enterkeyhint="next" aria-describedby="f-email-hint" /> <div class="field__description"> <span class="field__hint" id="f-email-hint">We'll never sell or share your email address.</span> <span class="field__error" role="alert">Please enter a valid email address.</span> </div></div><div class="field"> <label class="field__label" for="f-phone">Phone</label> <input class="input" id="f-phone" name="phone" type="tel" inputmode="tel" placeholder="+1 (555) 012-3456" autocomplete="tel" enterkeyhint="next" /></div><div class="field"> <label class="field__label" for="f-date">Datetime</label> <input class="input" id="f-date" name="date" type="datetime-local" inputmode="none" autocomplete="off" /></div>Leading icon
Loading components…
<label class="input-group"> <input class="input" type="text" placeholder="Placeholder" /> <span class="input-group__addon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" > <line x1="4" y1="6" x2="20" y2="6" /> <line x1="4" y1="12" x2="20" y2="12" /> <line x1="4" y1="18" x2="20" y2="18" /> </svg> </span></label>Trailing icon
Loading components…
<label class="input-group"> <input class="input" type="search" placeholder="Search…" aria-label="Search" /> <span class="input-group__addon" data-align="inline-end"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" > <circle cx="11" cy="11" r="8" /> <line x1="21" y1="21" x2="16.65" y2="16.65" /> </svg> </span></label>