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>

<!-- Checkboxes -->
<ul class="check-list">
  <li><label><input type="checkbox" /> Option</label></li>
</ul>

<!-- Radio buttons -->
<ul class="check-list">
  <li><label><input type="radio" name="r" /> Option</label></li>
</ul>

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

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

Custom input components

Code

<!-- Button variants -->
<button class="button">Default</button>
<a href="#" class="button button--accent">Accent</a>
<a href="#" class="button button--small">Small</a>
<a href="#" class="button button--large">Large</a>

<!-- Button with icon -->
<a href="#" class="button with-icon">
  <img src="icon.svg" class="icon" /> Label
</a>

<!-- Button group -->
<div class="button-group">
  <a href="#" class="button">One</a>
  <a href="#" class="button">Two</a>
</div>

<!-- Toggle switch -->
<div class="switch">
  <input id="off" name="toggle" type="radio" checked>
  <label for="off">Off</label>
  <input id="on" name="toggle" type="radio">
  <label for="on">On</label>
  <span></span>
</div>

<!-- Progress bar -->
<div class="progress-bar">
  <div class="fill" style="width: 65%"></div>
</div>

Uncomment @imports in main.css to style.

Button components 6_components/buttons.css

Button link
Accent button
Icon button link
Small button link
Large button link
Button group Button group Button group

Custom controls

6_components/switches.css

6_components/progress.css

6_components/progress.css