ComponentsLumos 0.0.2NewOpen component
Select
A dropdown, either from your options or from a list it already knows.
Select takes the options you give it, or builds a list you would otherwise be typing out by hand — months, days, states, a run of years.
<Select label="Plan" options={["Free", "Pro", "Team"]} />
<Select variant="month" />
<Select variant="year" from={1950} to={2026} />An option is a plain string, which is its own label, or { value, label } where the two differ.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
render | boolean | true | Set to false to skip this component and everything inside it. |
variant | "list" | "month" | "day" | "state" | "year" | "list" | What the field offers. list is the options you supply; month, day and state are built in; year is a range set with from and to. |
options | (string | { value, label })[] | None | What there is to choose from. list only, where it is required. |
from | number | None | The earliest year offered. year only. Defaults to a hundred before to. |
to | number | None | The latest year offered. year only. Defaults to the year the site was built. |
label | string | None | The text above the field. Defaults to the wording of the variant. |
value | string | None | Which option starts out chosen. |
name | string | None | The name it submits under. Taken from the label where it is not set. |
placeholder | string | None | The text shown before a choice is made. Defaults to the wording of the variant. |
required | boolean | false | Marks the field as needed, and stars its label. |