Inputs

A field can be taken over — by an agent, by anything that knows what to write. While it is held it says so, stops answering to the keyboard and the pointer, and the value appears the way the field decides: spelled out for a word, chosen for an option, ticked for a switch. Assistance is temporary by nature; a field left assisted is a field nobody can use.

One of each, once. Press Play above and they are filled in turn, by the same calls an agent would make — which is the only way to know the contract holds for all of them.

A fixed word — a unit, a currency — drawn in the field's frame, before or after the value. Screen readers read it with the field; it is not part of the value, cannot be focused, and nothing of it is submitted. The frozen look holds with it.

stepper: true, a button on each side of a number — a quantity. It steps by the field's step and stops at its min and max, its button resting there; from symfony-forms, the bounds come from the field's Range constraint.

`segmented: true` draws a radio group as a strip of segments, for one choice among a few short ones: the same radios, moved along by the arrows, sending the same value. `range-input` takes a value along a scale — `min`, `max`, `step` — and says it beside its label as it moves, in the page's locale and with the decimals its step asks for; `suffix` is a word after it, never submitted. The vue twin emits on every step, so a page can recompute as the thumb goes.

A frozen field holds a value someone may read and not change: settled, not unavailable. It keeps the contrast of an editable field and stays focusable and selectable — only what invites writing goes: a dashed frame over no ground of its own, no text cursor, no picker. A display value is not a field at all: a label and what the record says, on the line of a field so the two read as one block, a dash when there is nothing. The vue fields take `readonly` the same way; a select, radios, a switch, a file, a code or an emoji, which HTML cannot make readonly, show their value in a readonly field that holds no name.

A button takes an action rather than a value, so there is nothing for an agent to write into it.

One real field under the cells, so the server reads one value and the browser keeps what it already does: a pasted code lands whole, a phone offers the code it received, backspace goes back. Filled, it sends its form on its own — turned off on this page, which has nowhere to send it.

The two custom selects outside a form group, as a toolbar or a filter bar places them.

Labels on either side, glyphs inside, and the checked state.

Once on, a switch can take the colour of a state or of a category rather than the link's. One that switches on something with consequences takes `warning`, and asks before: refused, it stays off. Switching off is never questioned. Either way it says `switch:change` to the page.

The same switch inside a vue tree, where the checked state is state and not a data attribute a script flips.