ComponentsLumos 0.0.2NewOpen component
Input
A single-line field that settles its own type, keyboard and autofill.
Most of what makes a field work is decided by four attributes that have to agree: type, inputmode, autocomplete and the label. Get one wrong and a phone field opens a letter keyboard, or an email field is never autofilled. Input takes one prop instead — variant — and settles all four together.
<Input variant="email" required />
<Input variant="phone" />
<Input label="Company" />Each variant brings its own label and placeholder, so a field only has to say which one it is. Set label when yours needs different wording.
Variants
| Variant | Field type | What it brings |
|---|---|---|
text | text | No assumptions. The default, for anything the list does not cover. |
first-name, last-name | text | Autofilled from a saved address. |
email | email | The email keyboard, and the browser's own validation. |
phone | tel | The number pad. |
url | url | The URL keyboard, and validation. |
number | number | The numeric keyboard. Autofill off. |
date | date | The browser's date picker. |
zip-code | text | The numeric keyboard, autofilled from an address. |
search | search | The browser's search handling, including the clear button. |
password | password | Masked, and offered to the password manager. |
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
render | boolean | true | Set to false to skip this component and everything inside it. |
variant | "text" | "first-name" | "last-name" | "email" | "phone" | "date" | "zip-code" | "number" | "search" | "password" | "url" | "text" | What the field is for. It settles the input's type, keyboard, autofill and wording together. |
label | string | None | The text above the field. Defaults to the wording of the variant. |
value | string | None | What the field starts out holding. |
name | string | None | The name it submits under. Taken from the label where it is not set. |
placeholder | string | None | The text shown in an empty field. Defaults to the wording of the variant. |
required | boolean | false | Marks the field as needed, and stars its label. |