For the complete documentation index, see llms.txt. This page is also available as Markdown.

Input

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.

How to Use Input

You’ll find Input under Forms in the Components list.

  1. Place Input inside a Form.

  2. Choose the correct Type.

  3. Enter a short, unique Name.

  4. Add a Label whose For value exactly matches the Name.

  5. Set Required and Placeholder as needed.

  6. Style the text, border, background, and focus outline.

Component Settings

Settings

Type is not responsive and defaults to Text:

  • Text

  • Textarea

  • Email

  • 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.

Name an Email input exactly email when the submitted address should become the email’s Reply-To address.

Input

Input text Color defaults to Text 50.

Font defaults to Body and Size to Base.

Outline

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.

Shared Input Defaults

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.

Accessibility

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.

Common Control
Description

Link

Link to a page, resource, anchor, email address, or website.

Layout

Control positioning, stacking, visibility, overflow, and isolation.

Sizing

Set width, height, and responsive size constraints.

Spacing

Add responsive margin and padding.

Typography & Text Styles

Control fonts, text spacing, decoration, colour, and semantic wrappers.

Backgrounds

Apply colour, image, gradient, SVG, video, and hover backgrounds.

Transitions

Choose what animates and set its timing curve, duration, and delay.

Effects

Apply shadows, opacity, and hover effects.

Filters

Apply blur, brightness, saturation, shadow, and backdrop effects.

Transforms

Scale, rotate, move, and skew components.

Borders

Set border style, colour, opacity, width, radius, and hover states.

Advanced

Add CSS classes and IDs, or change supported HTML tags.

Last updated

Was this helpful?