Forms on Socle

Overview

Mon, 01 Jan 0001 00:00:00 +0000

Form controls are styled by @uncinq/css-base, on the native elements themselves. There is no .input or .select class to apply.

This package adds only what css-base cannot: the layout around those controls.

Page	Class	Covers
Form	`.form`	The two-column grid and its layout helpers
Check row	`.form-check`	A checkbox or radio laid out beside its label

Both live in components/form.css.

Accessibility

Nothing here supplies an accessible name. Every control needs a <label for> pointing at its id, or a .visually-hidden label when the design has no room for a visible one.

Form

Mon, 01 Jan 0001 00:00:00 +0000

A responsive two-column grid that collapses to one column when there is not enough room.

<form class="form">
 <div>
 <label for="first">First name</label>
 <input id="first" type="text">
 </div>
 <div>
 <label for="last">Last name</label>
 <input id="last" type="text">
 </div>
 <div class="full">
 <label for="message">Message</label>
 <textarea id="message"></textarea>
 <p class="help" id="message-help">Markdown is supported.</p>
 </div>
 <div class="actions">
 <button class="btn" type="submit">Send</button>
 </div>
</form>

Each field is a plain div. There is no .form-group or .field class: the grid places its direct children, whatever they are.

Check row

Mon, 01 Jan 0001 00:00:00 +0000

A checkbox or radio laid out inline with its label.

<div class="form-check">
 <input id="terms" type="checkbox">
 <label for="terms">I accept the terms</label>
</div>

The whole component

.form-check { display: flex; }

That is the entire rule, and it is deliberate. The control’s appearance, its size, and the gap between it and the adjacent label all come from css-base, which styles [type='checkbox'] + label directly on the native elements.

So the only thing missing from a bare input and label is that they sit on separate lines by default. This class fixes that, and stays out of everything else.