Field

Preview Code

375 768 Full

Open

html

<label class="aparte-field-label" for="email">
  Email <span class="aparte-field-required" aria-hidden="true">*</span>
</label>
<input id="email" class="aparte-field" type="email" placeholder="you@example.com" />
<p class="aparte-field-hint">We only use this to send a receipt.</p>
<p class="aparte-field-warning">Changing it signs you out of other devices.</p>
<div class="aparte-field-group">
  <span class="aparte-field-group__prefix">https://</span>
  <input class="aparte-field" placeholder="example.com" />
</div>
<p><label><input type="checkbox" class="aparte-checkbox aparte-checkbox--danger" /> Delete my account</label></p>
<p><label><input type="checkbox" role="switch" class="aparte-switch aparte-switch--success" checked /> Email notifications</label></p>

Every form control a settings screen needs, drawn on the browser’s own elements. .aparte-field is one recipe for <input>, <textarea> and <select> alike: border, background, radius, padding, focus ring, placeholder. .aparte-checkbox, .aparte-radio, .aparte-switch and .aparte-range repaint the native controls, so they keep their keyboard behaviour and their form value.

Around them: .aparte-field-label, .aparte-field-hint, .aparte-field-warning, .aparte-field-error, a .aparte-field-group that puts a prefix or a suffix against the field, and .aparte-fieldset for a set of choices.

Variants

Sizes, an error, a disabled field

Preview Code

375 768 Full

Open

html

<!-- An error is aria-invalid on the field and a message it points to. -->
<label class="aparte-field-label" for="key">API key</label>
<input id="key" class="aparte-field" value="sk-..." aria-invalid="true" aria-describedby="key-error" />
<p class="aparte-field-error" id="key-error">This key was rejected by the provider.</p>

<div class="aparte-field-row">
  <input class="aparte-field aparte-field--sm" placeholder="Small" />
  <input class="aparte-field" placeholder="Medium" />
  <input class="aparte-field aparte-field--lg" placeholder="Large" />
</div>
<input class="aparte-field" placeholder="Disabled" disabled />

--sm and --lg follow the button sizes, so a field and a button in one row line up. An error is aria-invalid on the field, which draws it, and a message the field points to.

Choices as cards

Preview Code

375 768 Full

Open

html

<fieldset class="aparte-fieldset">
  <legend class="aparte-field-label">Where the key lives</legend>
  <label class="aparte-field-choice aparte-field-choice--boxed aparte-field-choice--selected">
    <input type="radio" name="where" class="aparte-radio" checked />
    <span class="aparte-field-choice__body">In the browser<span class="aparte-field-hint">For prototypes and local models.</span></span>
  </label>
  <label class="aparte-field-choice aparte-field-choice--boxed">
    <input type="radio" name="where" class="aparte-radio" />
    <span class="aparte-field-choice__body">On your server<span class="aparte-field-hint">For production.</span></span>
  </label>
</fieldset>

.aparte-field-choice--boxed turns a radio or a checkbox and its text into a card the whole of which can be clicked.

Customize

Variable	Default
--aparte-switch-thumb-shadow	0 1px 2px rgba(0, 0, 0, 0.15)
--aparte-range-thumb-shadow	0 1px 2px rgba(0, 0, 0, 0.15)
--aparte-color-size	32px
--aparte-meter-height	8px
--aparte-field-textarea-min-height	80px
--aparte-checkbox-size	18px
--aparte-radio-size	18px
--aparte-radio-dot-size	8px
--aparte-switch-width	40px
--aparte-switch-height	22px
--aparte-switch-thumb-inset	2px
--aparte-range-thumb-size	16px
--aparte-range-track-height	4px
--aparte-field-choice-gap	var(--aparte-space-5)
--aparte-field-choice-padding	var(--aparte-space-4) var(--aparte-space-5)
--aparte-field-choice-radius	var(--aparte-radius-lg)
--aparte-meter-track	var(--aparte-surface-3)
--aparte-meter-optimum	var(--aparte-success)
--aparte-meter-suboptimum	var(--aparte-warning)
--aparte-meter-poor	var(--aparte-error)
--aparte-output-padding	var(--aparte-space-1) var(--aparte-space-2)
--aparte-output-bg	var(--aparte-surface-2)
--aparte-field-padding	var(--aparte-space-2) var(--aparte-space-3)
--aparte-field-padding-sm	var(--aparte-space-1) var(--aparte-space-2)
--aparte-field-padding-lg	var(--aparte-space-3) var(--aparte-space-4)
--aparte-field-radius	var(--aparte-radius-md)
--aparte-field-size	var(--aparte-btn-size-lg)
--aparte-field-size-sm	var(--aparte-btn-size-md)
--aparte-field-size-lg	var(--aparte-btn-size-xl)
--aparte-checkbox-intent	—
--aparte-checkbox-on-intent	—
--aparte-radio-intent	—
--aparte-range-intent	—
--aparte-switch-intent	—
--aparte-switch-thumb-size	—
--aparte-switch-track	—

Classes

.aparte-btn · .aparte-checkbox · .aparte-checkbox--danger · .aparte-checkbox--info · .aparte-checkbox--neutral · .aparte-checkbox--primary · .aparte-checkbox--secondary · .aparte-checkbox--success · .aparte-checkbox--warning · .aparte-color · .aparte-field · .aparte-field--lg · .aparte-field--sm · .aparte-field--textarea · .aparte-field-choice · .aparte-field-choice--boxed · .aparte-field-choice--selected · .aparte-field-choice__body · .aparte-field-error · .aparte-field-group · .aparte-field-group__prefix · .aparte-field-group__suffix · .aparte-field-hint · .aparte-field-label · .aparte-field-required · .aparte-field-row · .aparte-field-warning · .aparte-fieldset · .aparte-meter · .aparte-output · .aparte-radio · .aparte-radio--danger · .aparte-radio--info · .aparte-radio--neutral · .aparte-radio--primary · .aparte-radio--secondary · .aparte-radio--success · .aparte-radio--warning · .aparte-range · .aparte-range--danger · .aparte-range--info · .aparte-range--neutral · .aparte-range--primary · .aparte-range--secondary · .aparte-range--success · .aparte-range--warning · .aparte-switch · .aparte-switch--danger · .aparte-switch--info · .aparte-switch--neutral · .aparte-switch--primary · .aparte-switch--secondary · .aparte-switch--success · .aparte-switch--warning

Accessibility

• These are native controls: labels, keyboard, form submission and validation work as the browser makes them work. Tie each label to its field with for and id.
• An error is announced through aria-invalid and aria-describedby pointing at the message.
• A switch is a checkbox with role="switch".

Related

• Select — a dropdown with groups and search, when a native <select> is not enough.
• Button — the sizes fields follow.