inputs
Inputs are designed to be placed in a center-aligned form that is 100% of the parent width using browser defaults and to have different states based on user interaction.
Text Inputs Example
Checkboxes and Radios Example
HTML
<div>
<form>
<label for="input">Default</label>
<small>This is a hint</small>
<input type="text" id="input">
<label for="password-input" onclick="changeType()" id="password-label">Password</label>
<small>Must be at least 7 characters long</small>
<input type="password" id="password-input">
<button type="submit" class="button promo">submit</button>
<label class="checkbox-container">Custom Radio
<input type="radio" name="radio">
<span class="radio"></span>
</label>
</form>
</div>
RULES
| Property | Value |
|---|---|
| Typeface | Noto Sans |
| Weight | 400 |
| Size | 1 em |
| Border | 1 pixel solid #989898 with a 2-pixel radius |
SELECT
Custom selects use a combination of the expander molecule and link-based buttons instead of the native select element for forms. Because they are based on the expander, a toggle of the open class will show and remove the option list. Lastly, adding the class selected to any of options will make it bold. Different use cases will most likely require different javascript, but we have a starter script for the purposes of this demo.
EXAMPLE
HTML
<div class="select">
<span class="button big expander" onclick="this.classList.toggle('open');">Order by</span>
<div class="options">
<a class="button big" href="#" data-name="Relevance">Relevance</a>
<a class="button big" href="#" data-name="Newest">Newest</a>
<a class="button big" href="#" data-name="Oldest">Oldest</a>
</div>
</div>