Input

Native <input class="input">. Always pair with a <label class="label">. Invalid state is aria-invalid="true", not a JS API. There is no wrapper.

Preview

Code

<div class="field">
	<label class="label" for="email">Email</label>
	<input class="input" id="email" type="email" placeholder="m@example.com">
</div>

<div class="field">
	<label class="label" for="broken">Invalid</label>
	<input class="input" id="broken" type="email" value="not-an-email" aria-invalid="true">
	<p class="field-error">Enter a valid email.</p>
</div>