Input

Form element for receiving user input

Demo

API

Tag

Name Type Content
input Native element None

Attributes

Name Value Description
type
  • text default
  • email
  • password
  • tel
  • number
  • file
  • more...
Sets the expected type of value. Take care to set email, tel, password, and number inputs based on use case to ensure optimal user experience.

See checkbox, radio, and range for details on those specific types.
disabled Boolean attribute Disables the input so it can't be changed or interacted with. It will be skipped when tabbing and its value will not be submitted with the form.
readonly Boolean attribute Makes the input read-only, which means the user can't change its value, but can still tab to it and copy the text. Its value will be submitted with the form.
invalid Boolean attribute Highlights input as having an invalid value. When the input is invalid it should have a small element explaining how to correct it. Validation is owned by your application not Mdash.
placeholder String Displays a message inside the input. Ideal for showing an expected format or sample value.
autofocus Boolean attribute If present, the browser will bring focus to this element on page load. Excellent for log in or search pages or whenever the first interaction is likely to type something.
autocomplete
Credit Card
cc-name
cc-number
cc-csc
cc-exp-month
cc-exp-year
Name
name
given-name
additional-name
family-name
Address
street-address
address-level1 (state or province)
address-level2 (city)
postal-code
country
Phone & Email
tel
email
 These are required in order for the browser to autofill the form. Not all values are shown here! See the complete list and learn more at MDN: HTML autocomplete attribute.
Note: Not all input attributes are listed here. See MDN: Input element - Attributes for the full list.

Guidelines

Use the right type

It's very important to take the time to understand what values a user can enter in a given input and to use the right type for those values. If, for example, the input is for a membership number then using type="number" will present an easier to use numbers-only keyboard on most touch devices. The same goes for email and phone numbers. These UX optimizations are important to users and are virtually free to implement, so take a moment to ensure you're using the right input type.

Accessibility

Labels should use the for attribute to reference the id of its corresponding input. Inputs should use the right type (see above), autofocus, and autocomplete to improve their usability.