Input elements

The controls every form is built from, side by side: the text inputs, the inputs a browser draws for itself, the select in each shape core renders it, small buttons alone and beside the input each one belongs to, and small dropbuttons. Nothing is saved. The button at the foot of the page validates everything, so the error state of each control can be seen; every other button skips validation and only says which one was pressed.

Text inputs

One element with a different type attribute each time, so they should be indistinguishable until they are typed in -- and they are the baseline every other control on the page is measured against. A browser adds its own furniture to some of them: the spinner of a number, the clear button of a search. The required one is the only control on the page that fails validation when it is empty, and the email and the number fail when they hold the wrong thing.

A description under the input.
€ per month

Inputs that are not text

Controls the browser draws for itself. A theme gets the box around them and very little of what is inside, so the question is whether they sit in the same column as the text inputs and keep the same label above them.

Nothing is uploaded.

Dropdowns

The select in every shape core renders it. The first three are closed dropdowns and should be the height of a text input, with an arrow the theme draws rather than the one the browser does. The multiple and the sized ones are open lists, which is a different control with the same element: a box of rows with no arrow at all.

No empty option, so a value is always chosen.

Small buttons

A button with the class button--small, which is all core has for one. On its own it is a row of buttons that should keep their roles at a smaller size. It is more often beside an input, as the action of that input alone, and then it has to line up with a control taller than itself: a text input, a select, a file input. None of these validate the page.

Small dropdowns

A dropbutton given a #dropbutton_type, which core adds to the wrapper as a class -- dropbutton--small, dropbutton--extrasmall -- and leaves the rest to the theme. Small is what the operations of a row in a table use. Each is shown with one link, which renders no toggle, and with several.