Forms, labels and inputs

Source: src/styles/parts/forms.scs — and controls::input, controls::field, controls::checkbox for the same recipes inside a shadow root.

Two shapes, and the difference matters. A bare <input> carries its own border. A .input is a box that carries the border and the focus ring, with a borderless control inside it — which is what lets an icon, a unit or a second control share the line without a nested border. The mmo input elements produce the second shape.

<label> <span class="label">Caption</span> <span class="input"><mmo-icon …><input …></span> </label>

The control box

Plain With a leading icon

With a unit px With an action

Restricted

Bare controls

An <input> written by hand, outside the wrapper, gets the same look — the same height, radius, hover and focus ring.

text email password search url tel

number date time datetime-local

Reference

Description

Select

The chevron belongs to a closed control: a multiple or size select is a list box, and drawing a chevron over its options is exactly the kind of detail that only shows up on a real page.

Single Inside a .input box

size multiple

Checkbox, radio, toggle

Both are drawn rather than native, so they follow the palette; the checkbox tick is an inline svg, not a font glyph, so it stays crisp at any zoom. A <label> that directly contains one lays itself out as a row.

Checked Unchecked Checked, disabled Unchecked, disabled

Selected Not selected Disabled

Notifications Weekly digest Compact Disabled

Day Week Month

Range, colour, file

range color file

States

readonly disabled .input with a readonly control .readonly

Validity

State is carried by the border and a message, never by colour alone. .invalid also reddens the focus ring; :user-invalid gets the same treatment, so a browser-validated field needs no class at all.

Invalid Enter a valid email address. Required This one cannot be left empty. Valid Checked against the directory. With a counter 47 characters left

Structure

A <form> is a column with the section gap; a <fieldset> is a surface with its legend cut into the hairline. .borderless and .block strip the frame for a fieldset that is only there to group, and .bordered strengthens it.

Identity Name Email

fieldset.bordered Name

fieldset.borderless Name

.field-row is a grid that fits as many controls per line as 180px allows, aligned on their bottoms so the labels stay level whatever their length. .field-inline puts the label to the left of its control, for a dense edit panel.

First name Last name Role

Reference Amount Paid

A whole form

Everything above, assembled the way a page would write it: a form, a fieldset per group, a field row for what fits side by side, and the actions last.

For the controls that are elements rather than classes — <mmo-select>, <mmo-list>, <mmo-address>, <mmo-password> and the rest — see Custom elements · inputs: they produce the markup at the top of this page, so they inherit everything on it.