ComponentsLumos 0.0.2NewOpen component
Choice
A checkbox or a radio, drawn as a box, a switch or a chip.
One component for both, because the difference between a checkbox and a radio is what they mean rather than how they are built: a checkbox stands on its own, and radios that share a name are one question with several answers.
<Choice label="Email me about new releases" />
<Fieldset legend="How often?" variant="inline">
<Choice type="radio" name="cadence" label="Weekly" value="weekly" checked />
<Choice type="radio" name="cadence" label="Monthly" value="monthly" />
</Fieldset>Props
| Prop | Type | Default | What it does |
|---|---|---|---|
render | boolean | true | Set to false to skip this component and everything inside it. |
type | "checkbox" | "radio" | "checkbox" | Whether it stands on its own or belongs to a group. |
name | string | None | The name it submits under. On a radio it is the name every choice in the group shares, and it is required. On a checkbox it is taken from the label where it is not set. |
label | string | None | The text beside the control, and what it is called. |
value | string | "on" | What it submits when it is chosen. |
variant | "default" | "toggle" | "chip" | "default" | How the control is drawn. default is a box or a circle beside the text, toggle is a switch that slides, and chip makes the whole of it one control that fills when chosen. |
checked | boolean | false | Whether it starts out chosen. |
required | boolean | false | Marks the choice as needed. |
Every variant is the same control
toggle and chip change what is drawn, not what is rendered: underneath each one is a real <input> with a real <label>. So the keyboard reaches them, the form submits them, and a screen reader announces them as the checkbox or radio they are — a switch that is only a switch to look at.