Forms

Native form elements with sensible defaults.

Text inputs

Code

<!-- Standard text input -->
<div class="field">
  <label for="name">Name</label>
  <input type="text" name="name" id="name"
    placeholder="Text" class="text-input" />
</div>

<!-- Email input -->
<input type="email" class="text-input"
  placeholder="[email protected]" />

<!-- Search input -->
<input type="search" class="search-input"
  placeholder="Search" />

<!-- Textarea -->
<textarea name="message" id="message"></textarea>

<!-- Invalid state -->
<input type="text" class="error text-input" />
<label class="error">Error message</label>

Control inputs

Code

<!-- Select dropdown -->
<select name="select">
  <option>Choose one</option>
  <option value="1">Option 1</option>
</select>

<!-- Date/time inputs -->
<input type="date" />
<input type="time" />
<input type="datetime-local" />

<!-- Other controls -->
<input type="range" />
<input type="color" />
<input type="file" />