Form

Inputs, selects, checkboxes, switches, and form groups.

Text inputs

Form controls use distinct class names. Wrap each control in a na-form-group with a na-label.

<div class="na-form-group">
  <label class="na-label" for="name">Full name</label>
  <input class="na-input" type="text" id="name" placeholder="Jane Smith">
  <span class="na-form-help">Helper text.</span>
</div>

<!-- Valid / invalid states -->
<input class="na-input na-input-valid" ...>
<span class="na-form-success">Looks good!</span>

<input class="na-input na-input-invalid" ...>
<span class="na-form-error">Error message.</span>

Sizes

<input class="na-input na-input-xs" ...>
<input class="na-input na-input-s" ...>
<input class="na-input" ...>
<input class="na-input na-input-l" ...>
<input class="na-input na-input-xl" ...>

Input group

https://

<div class="na-input-group">
  <span class="na-input-addon">https://</span>
  <input class="na-input" type="text" placeholder="example.com">
</div>

Checkbox & radio

Remember me Subscribe to newsletter Option A Option B

<label class="na-checkbox"><input type="checkbox"> Remember me</label>
<label class="na-radio"><input type="radio" name="opt"> Option A</label>

Toggle switch

Notifications enabled Dark mode

<label class="na-switch">
  <input class="na-switch-input" type="checkbox">
  <span class="na-switch-track"></span>
  <span class="na-switch-label">Enable feature</span>
</label>

Range input

<input class="na-range" type="range" min="0" max="100" value="60">

Fieldset & legend

Billing address

City

Postcode

<fieldset class="na-fieldset">
  <legend class="na-legend">Billing address</legend>
  <div class="na-form-row">
    <div class="na-form-group">...</div>
    <div class="na-form-group">...</div>
  </div>
</fieldset>

Class reference

Class	Description
`na-form`	Form wrapper
`na-form-group`	Label + control + help row
`na-form-row`	Multi-column form row
`na-label`	Field label
`na-input / na-textarea / na-select`	Text controls
`na-input-xs/s/m/l/xl/2xl/3xl`	Input size scale
`na-input-valid / --invalid`	Validation state styling
`na-form-help / na-form-error / na-form-success`	Below-input text
`na-input-group / na-input-addon`	Prepend/append group
`na-checkbox / na-radio`	Styled check/radio labels
`na-switch / na-switch-input / na-switch-track / na-switch-label`	Toggle switch
`na-range`	Range slider
`na-fieldset / na-legend`	Grouped fields