Forms
Text entry, choices, switches, sliders and dates, laid out with fields.
Input
A single line of text: a name, an email, a number. Pair it with a label in a field.
Set by June in accounts.
PDF or photo, up to 8 MB. Tomasz reads these before quoting.
Textarea
Several lines of free text, like delivery notes or a reason for a return. It grows with its content.
81 of 200 characters
Only Tomasz can edit this.
Label
Names a control and makes its text clickable. Inside forms, use the field label instead.
Field
Lays out a label, a control, help text and an error. Group fields with a field group and related choices with a field set.
Form
Formsnap and Superforms with a schema: validation, errors and messages wired to the same field styles.
Input group
An input with text, icons or a button inside the same pill.
- Hellebore ‘Ice n’ Roses’ $18.50
- Bare-root rose ‘Gertrude Jekyll’ Pre-order, $21.75
Gift cards are paused while June moves the till.
Input OTP
A one-time code, one box per character. Paste fills every box at once.
We sent 6 digits to nell@hollinnursery.com. They expire at 10:42 AM.
Native select
The browser’s own select, styled as a pill. Best on phones and for long, plain lists.
Runs go out on Tuesday, Thursday, and Saturday.
Select
Picks one value from a short list in a paper popover. Use it when options need extra detail, like a price.
Combobox
Choose one value from a list too long to scan, by typing a few letters of it.
In stock 38 in stock, 6 reserved, $18.50 each.
Command
Search orders, plants and actions from one box, and run them from the keyboard.
Pick a row, or use the arrow keys and Enter.
or press CtrlK
Calendar
Pick one day from a month grid, with days that can't be booked crossed out.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
27 | 28 | 29 | 30 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Rosa Lindqvist collects order #4481 from the yard gate on Friday, October 23. We’re closed on Mondays.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
27 | 28 | 29 | 30 | 31 | 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Hal Jennings has been a customer since Sep 12, 2023.
Range calendar
Pick a first and last day, such as the days a delivery can arrive.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
27 | 28 | 29 | 30 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
3 van runs in that window, the first on Tuesday, October 27.
Date picker
A calendar behind a button, for forms where the date is one field among many.
Hal Jennings, 14 Ferry Lane. 3 × Bare-root rose ‘Gertrude Jekyll’, arriving Tuesday, November 10. Delivery on Thursday, November 12, morning, 9:00 AM to 12:00 PM.
Checkbox
Turns one option on or off, or picks several from a list. Use a switch for settings that apply at once.
Out of paper until Tuesday, October 27.
Radio group
Picks exactly one option from a short list where every option should stay visible.
Switch
Turns a setting on or off straight away, with no save button.
An email for each order, as it comes in.
When a plant drops to 12 or fewer.
At 7:00 AM on Tuesday, Thursday, and Saturday.
June turned this off for everyone while she changes banks.
Slider
Sets a number in a known range by dragging. Show the value next to it.
Bare-root rose ‘Gertrude Jekyll’, $21.75 each, $304.50 in all. Trade price from 24 roses: $19.50 each.
6 plants in that range.
Set by Nell. Van 2 keeps to the same area when Tomasz drives it.