Field

Width Open in a tab

The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else.

The markup

<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>

Form fields. Ready-made classes; nothing to configure.

Every input control a UI library offers: text entry, textarea, select, checkbox, radio, switch, range. The library renders into the LIGHT DOM — there is no shadow root and no ::part() — so a class is the only handle a consumer has onto a native form control, and appearance: none is how this file takes the browser’s own chrome off a checkbox/radio/switch/range so these classes can repaint it.

.aparte-field is ONE shared recipe — border, background, radius, padding, focus ring, placeholder — applied to <input>, <textarea> and <select> alike, so a form built from all three still reads as one control family. Checkbox, radio and switch are drawn from the native control itself (appearance: none plus a pseudo-element), never a div standing in for one, so the browser’s own focus/keyboard/AT handling stays intact — only the paint changes.

Checkbox, radio, switch and range carry an INTENT axis, exactly like the button: a checked checkbox can be success or danger, not only primary. Unlike the button there is no separate FILL axis here — a checkbox has exactly one filled look, not five — so intent is the only modifier each of these needs.

This layer is NEUTRAL: it is what a UI library offers, not a summary of what this repo happens to use. A control nothing wears yet still ships, because the form the repo hasn’t built is not a reason to leave it out.

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

The tokens these read are on the CSS variables reference; every class of the kit, on one page, is the classes reference.