Organism
Option list
A set of answers where one is chosen, each reachable by a number key. 13 instances across 8 screens, in the reject and escalate dialogs, and nowhere else in the product.
It is the radio pattern, and it is named as one rather than replaced. Checkbox, radio and toggle are absent from this product entirely: there is no form to fill in, there is a decision to take. What a radio group does here is done by a list of options where one is chosen, each answerable with a number key, and that is design principle 3 in a component: the override is one key, and it teaches.
One border around the whole list and hairlines between. The group is the unit. A set of options in separate boxes reads as several questions, and there is one. That is the entire file: a flex column, one --rule-edge, and --radius-ui.
Anatomy
dark, shipped
.optlistthe group. A flex column with one border and one radius, and it carriesrole="radiogroup"with a label naming the question.optone option, its own molecule and a real link with a real destination. 62 of them across the product, 60 in this container and 2 in the second axis.keythe number that answers it. An atom, and it inverts when the option is chosen by readingcurrentColorrather than by being told.lblthe reason, in the analyst’s words.flex:1 1 auto, so it is what gives way when the dialog narrows.routeswhere this answer sends the case. Mono, right aligned so the column reads down, and it is what makes the list teach instead of merely collect
The hairline between options is opt’s own border-bottom, removed on the last child there rather than here. This file draws exactly one line, and it is the one around the outside.
Variants
| Axis | Value | Uses | The rule |
|---|---|---|---|
| none | no values | 13 | Three options or six is a count, and step 2 said so in as many words. The reject list runs to seven and the second axis to two, and both are the same component |
| selection | no values | – | Prohibited. There is no multiple choice form. A verdict has one reason, and a list that accepted two would be asking the analyst to describe the case rather than rule on it |
| density | no values | – | Prohibited. The padding belongs to opt, and seven options at the desk fit inside a dialog that is never taller than the viewport minus the two zones above it |
| emphasis | no values | – | It belongs to the option. is-chosen is a state and not a variant: the same option wears it on one screen and not on the next, and which one wears it is the analyst’s answer |
When to use it
When the analyst has to pick exactly one answer from a set that is known in advance and short enough to read. In this product that is twice: what Clerk got wrong, and who an escalation goes to.
Where she meets it. Every time she disagrees with Clerk, which is the path this product exists to keep cheap. Rejecting costs four taps against accept’s two, and this component is taps two and three. What stage 04 bought is that five of six reasons derive the second axis, so four never became five, and the fourth tap is Enter rather than a confirmation step.
Rule and anti-rule
Do
One question, one border, one key per answer, and each answer says where it goes. The reason lands in tuning because the analyst pressed a number, not because she filled in a form.
Do not
Never for a confirmation. That is btn, in the dialog’s footer, where File the rejection already sits with Enter on it. Rejecting Clerk costs four taps against accept’s two, and a confirmation makes it five. The fifth tap is the one this stage may not add.
Limits
Rules of composition and context, which no anti-rule can carry: nothing else is the right component to take, and what is wrong is the count or the neighbour. Every one of them is a function in design/kit/checks/rules.mjs. Full table with sources on Architecture.
- R12. A list holds one filling or the other, never both inside the same border. An
optis a link you answer and akeyrowis a row you read, and one border holding both reads as a question with an answer you cannot give. The keyboard map opens a fresh list for each group of keys and one more for the control at its foot, seven in all, rather than one list holding everything.
States
The list has none. Every option inside it carries four. Point at one, hold the pointer down, tab into it. The second is chosen.
dark, shipped
The focus ring matters more here than almost anywhere else. The whole point of the list is that it is answered with a number key, so the ring has to say which line a number would land on. It is the global ring from base.css and this file declares nothing about it.
Out of reach does not exist. A reason that does not apply is not offered, so there is no disabled option and no explanation of why an answer is unavailable. The list is short because the taxonomy is short.
What it reads, and where it stands
| Role | Surface | Where on the component | Dark | Light |
|---|---|---|---|---|
--line-edge | line, exempt | the one border, around the whole group, through --rule-edge | ||
--radius-ui | geometry | the corners of that border | ||
--line-separator | line, exempt | between options, declared by opt rather than here | ||
--bg-surface | fill | the chosen option, declared by opt |
Two rows of the four are here for the reader rather than for the file: they are what a person editing this component will see change, and they live one level down. The full readout for the option is on its own page.