Components

Forms

Form element styles use semantic color tokens for all states: default, focus, disabled, and error. No hardcoded values. All form elements use var(--font-sans).

Text input

Helper text goes below the input.
Enter a valid email address. 
<div class="field">
  <label class="field-label" for="email">Email</label>
  <input class="input" id="email" type="email" placeholder="you@example.com" />
  <span class="field-hint">We'll never share your email.</span>
</div>

<!-- Error state -->
<input class="input input--error" aria-invalid="true" aria-describedby="err" />
<span class="field-error" id="err">Error message here.</span>

Select

<div class="select-wrap">
  <select class="input select" id="role">
    <option value="">Choose a role...</option>
    <option value="designer">Designer</option>
  </select>
  <svg class="select-chevron" ...></svg>
</div>

Checkbox

<label class="check-label">
  <input type="checkbox" class="check" />
  <span>Option label</span>
</label>

Radio

Preferred surface 
<fieldset class="fieldset">
  <legend class="fieldset-legend">Group label</legend>
  <label class="check-label">
    <input type="radio" class="radio" name="group" value="a" />
    <span>Option A</span>
  </label>
</fieldset>

Textarea

Maximum 500 characters.