| description | Collect text, email, numbers, passwords, telephone numbers, URLs, or multi-line content |
|---|
Input creates a single form field. Its Type selects the appropriate browser input, validation, keyboard, and autofill behaviour.
You’ll find Input under Forms in the Components list.
- Place Input inside a Form.
- Choose the correct Type.
- Enter a short, unique Name.
- Add a Label whose For value exactly matches the Name.
- Set Required and Placeholder as needed.
- Style the text, border, background, and focus outline.
Type is not responsive and defaults to Text:
- Text
- Textarea
- Number
- Password
- Search
- Telephone
- URL
Textarea reveals Rows, which defaults to 3.
Name is blank by default. If left blank, Elements generates a name. Use letters, numbers, hyphens, or underscores and do not reuse a Name within the Form.
Required is off by default.
Placeholder defaults to “Placeholder”.
Placeholder Color defaults to Text 400.
{% hint style="info" %}
Name an Email input exactly email when the submitted address should become the email’s Reply-To address.
{% endhint %}
Input text Color defaults to Text 50.
Font defaults to Body and Size to Base.
Type defaults to None:
- None — Adds no outline.
- Static — Uses one outline style.
- Focus — Provides Unfocused and Focused states.
Outline defaults are Solid style, Surface 500 colour, 100% opacity, width 1, and offset 0.
Keep a visible Focus state for keyboard users.
Input uses 100% Width and Auto Height.
Spacing is enabled with zero Margin and Padding 2 vertically and 3.5 horizontally.
The Border is Static by default with Solid style, Surface 900 colour, 100% opacity, Theme Default width, and no radius.
Use the most specific Type, add a visible Label, and do not use Placeholder as the only label. Explain required formats or password rules before the field.
- Label — Connects descriptive text to the Input.
- Date Picker — Adds a calendar interface.
- Select — Presents a fixed list of choices.
{% include "../../../.gitbook/includes/common-controls.md" %}