Forms

Illustration — not a published component

Every control here is a real export; the label, the hint and the error line are this site's markup, because Alpha ships no primitive for any of the three. Both the fields and the role selector default to 240px, which is why each is given the width of the column — a field wants the width of the field, and a form wants one answer for all of them.

The error line is text and aria-invalid, and nothing else. The second field is not painted red: TextInput has no validation state yet, and drawing one here with a stray border colour is exactly the drift these pages exist to avoid. What the field does say is whether it holds anything — the brand border and the clear × arrive with the first character.

Illustration — not a published component

These two controls name themselves, which is the difference between them and every field above. A TextInput needs a label written beside it; a Checkbox takes its text through label and puts it inside the <label> element it already is, so the text is part of the hit target rather than a thing pointed at it.

A group of radios is the one place that is not enough. Each option names itself, but the question they answer belongs to no single option — so it is a heading beside the group, and the group is tied to it with aria-labelledby. The exclusivity is the shared name, not the wrapper: that attribute alone is what clears the last answer, gives the set one tab stop, and moves the choice with the arrow keys.

The consent box starts checked and the updates box does not, which is the only editorial rule here worth stating: pre-tick what the reader has already agreed to, never what you would like them to.

Illustration — not a published component

Nothing on this row submits. A Toggle applies its change the moment it is flipped, which is what separates it from the boxes above — they look similar and they wait. The rule is worth stating once: if closing the page a second after clicking would leave the change made, it is a switch; if the change travels with the form, it is a Checkbox. The last row is disabled, and disabled collapses both track colours into one grey — so the thumb's position is all that says which value is locked, and the row has to say why in text.

The label is first here and the control is hard right, which is a layout rather than a prop: Toggle puts its own label after the control, like Checkbox and Radio. So the text is the row's, and it is a <label htmlFor> pointing at the switch — not a wrapper, because the switch's own root is already a <label> and one cannot nest inside another. Name it in exactly one of the two places. The switch itself is placed with a flex rule reaching in through [data-slot="toggle"]; do not put one in a .field, whose rule gives a control the width of the column — right for a text input, and it stretches a switch across the page.