Forms
Form controls use .ziom-input, .ziom-select,
.ziom-textarea, and friends, wrapped in a .ziom-form-group
with a .ziom-label. Shared partials shared/form_errors and
shared/form_actions handle validation and submit rows.
Text Inputs
We'll never share your email.
Password must be at least 8 characters.
HTML
<div class="ziom-form-group">
<label class="ziom-label">Email</label>
<input type="email" class="ziom-input" placeholder="you@example.com">
<p class="ziom-form-helper">We'll never share your email.</p>
</div>
<div class="ziom-form-group">
<label class="ziom-label ziom-label-required">Password</label>
<input type="password" class="ziom-input error" value="short">
<p class="ziom-form-error">Password must be at least 8 characters.</p>
</div>Sizes & Pill
HTML
<input type="text" class="ziom-input ziom-input-sm" placeholder="Small">
<input type="text" class="ziom-input" placeholder="Default">
<input type="text" class="ziom-input ziom-input-lg" placeholder="Large">
<input type="text" class="ziom-input ziom-input-pill" placeholder="Pill">Select & Textarea
HTML
<select class="ziom-select">
<option>Choose an option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<textarea class="ziom-textarea" placeholder="Enter text..."></textarea>Checkbox, Radio & Switch
HTML
<label class="ziom-checkbox">
<input type="checkbox" checked>
<span class="ziom-checkbox-label">Email notifications</span>
</label>
<div class="ziom-radio-group">
<label class="ziom-radio">
<input type="radio" name="plan" checked>
<span class="ziom-radio-label">Monthly</span>
</label>
<label class="ziom-radio">
<input type="radio" name="plan">
<span class="ziom-radio-label">Annual</span>
</label>
</div>
<label class="ziom-switch">
<input type="checkbox" checked>
<span>Enable feature</span>
</label>Input Group
$
HTML
<div class="ziom-input-group">
<span class="ziom-input-group-text">$</span>
<input type="text" class="ziom-input" placeholder="Amount">
</div>