v0.0.2older

Documentation version

Currently searching v0.0.2

Search pages, component props, utilities and tokens.

↑↓ to move to openesc to close

Open files in your editor

On a Mac, right-click the folder in Finder, hold Option, and choose Copy as Pathname.On Windows, hold Shift, right-click the folder, and choose Copy as path, then delete the quote marks.

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.

astro
<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

PropTypeDefaultWhat it does
renderbooleantrueSet 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.
namestringNoneThe 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.
labelstringNoneThe text beside the control, and what it is called.
valuestring"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.
checkedbooleanfalseWhether it starts out chosen.
requiredbooleanfalseMarks 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.