SlowlyInput
A form control for collecting input from visitors.
The Input block is a form control, the field a visitor types into or selects from. It is the building piece for forms you assemble yourself, rather than a whole form in one block.
Every setting in the table below (type, name, placeholder, value, the min/max/step/length bounds, pattern, autocomplete, and the required/disabled/readonly/checked/multiple/autofocus toggles) is applied as a real HTML attribute on the published field, not just in the editor canvas. A required email field publishes with type="email" and required, and the browser validates it accordingly.
Adding one
- Select the container or form wrapper to hold it.
- Open the inserter and search "input".
- Pick the Input block.
Settings
In the input's own panel. Appearance lives in the shared design panel.
| Setting | What it does | Reach for it when |
|---|---|---|
| Type | The kind of input: text, email, password, number, tel, url, date, time, checkbox, radio, range, file, hidden, textarea, and more | Always; the browser uses it for keyboard type, validation, and built-in pickers |
| Label | Visible label text above or beside the field; on by default | Keep it on; hiding it is only for cases where a visible label would be redundant and a screen-reader label is supplied another way |
| Label (dynamic) | Pulls the label text from a dynamic source | When labels come from a query or custom field |
| Placeholder | Light hint text shown inside the field before the visitor types | A short example value or format hint, not a replacement for a label |
| Name | The field's name attribute, used as the key when the form submits | Required for any field whose value needs to reach your form handler |
| ID | The field's id attribute | When you need to pair the input with an external label or script |
| Required | Marks the field as mandatory and triggers browser validation | Contact and booking forms where the field cannot be blank |
| Disabled | Renders the field non-interactive | Showing a value that the visitor cannot change |
| Read only | The field shows a value but the visitor cannot edit it | Pre-filled reference fields that should travel with the form |
| Autocomplete | Hints to the browser which autofill category applies, e.g. email, given-name, postal-code | Faster checkout and contact flows; set off to suppress autofill |
| Autofocus | Moves focus to this field when the page loads | The first and only prominent field on a dedicated landing or search page |
| Min / Max | Lower and upper bounds for number, date, and range inputs | Price filters, date pickers, age gates |
| Step | Increment between valid values for number and range | Quantity selectors that count in whole numbers or fixed intervals |
| Min length / Max length | Character count bounds for text-based inputs | Password rules, short-code fields |
| Pattern | A regular expression the value must match | Custom formats such as reference numbers or postal codes |
| Rows | Number of visible text rows; turns the field into a textarea when above 1 | Message and notes fields that benefit from more vertical space |
| Multiple | Allows more than one value, for file and email types | File uploads that accept several attachments at once |
| Value | A pre-filled value | Seeding a field with a default or a value from a dynamic source |
Styling
The input uses the shared design panel for spacing, colour, typography, borders, and effects. The states panel is where you style the focus ring and hover appearance, which matter most for keyboard users.
Accessibility
Give every input a label. The label setting is on by default; leave it on. A placeholder alone does not satisfy the requirement because it disappears the moment the visitor starts typing, and assistive tools do not consistently expose it as a label.
For checkbox and radio inputs, the label text is the thing a screen-reader user hears when they land on the field. Write it to make sense on its own, not just in the visual context around it.
If you turn the label off for a search field or similar, supply an aria-label or aria-labelledby via the HTML attributes panel so the field still has an accessible name.