Input
Form
Text field. With label, hint or error it is a labelled field.
Input(bind: …, label: …, hint: …)
Example
state email = ""
Input(bind: email, label: "Email", hint: "We never share it").email.required
Renders with the class wf-input, stable across releases, so a stylesheet may target it.
| Prop | Type | Meaning |
|---|---|---|
| bind: | State |
State variable the control reads and writes (two-way) |
| label: | String |
Visible label; also the control's accessible name |
| hint: | String |
Help text under the control, linked to it by |
| error: | String |
Error text (a string; empty when there is none): announced as it appears and sets |
| type: | .text .email .password .number .search .tel .url .date .time .datetime .color |
What the field holds |
| placeholder: | String |
Hint shown while the field is empty |
| value: | Any |
The control's value, when its state is not bound |
| min: | Any |
Lowest value |
| max: | Any |
Highest value |
| step: | Number |
Granularity |
| required: | Bool |
Whether the form refuses to submit without it |
| disabled: | Bool |
Whether the control is inert |
| size: | .sm .md .lg |
Its size |
| width: | .full |
Width |
| rounded: | Bool |
Rounded corners |
Attribute families: global, aria, data, input. Plus the universal props on every element: animate:, exit:, speed:, class:, ref:.