Inputs

  • HTML/CSS Available
  • Web Component In Progress
  • Last Updated

    2.0.0

Inputs allow a user to input and interact with data.

See Forms for guidance on composing full forms.

Variations

Default

Use to solicit a short, single line of text or a number.

Default
Hover
Focus
<input class="mds-form__input" type="text">
Disabled
<input class="mds-form__input" type="text" disabled>
With Placeholder
<input class="mds-form__input" type="text" placeholder="First Name">
  • Avoid using placeholder text by making sure the label above the text box is clear. If you still need additional instructional context, consider using Microcopy, so the helper content doesn’t disappear when a user starts typing.

Sizing

Sizing affects input size, text size and internal spacing. The default size is medium, and you can use a modifier class to make inputs smaller (mds-form__input--small) or larger (mds-form__input--large).

Small
Medium (Default)
Large
<input class="mds-form__input mds-form__input--small" type="text" id="small-text-box" placeholder="First Name">

Guidelines

Use When

  • A user must enter a name, email address, phone number, street address, age, salary, etc.

Don’t Use When

  • Gathering multiple lines of text. Instead, use a Text Area.
  • Performing a search. Instead, use a Search Field.

Behaviors

  • Placeholder text disappears when a user types in the input. If a user doesn’t enter a value and moves to another part of a form, the placeholder text reappears in the former text box.
  • In IE11, placeholder text is cleared on focus. This is default behavior and a known issue, teams are still encouraged to use text boxes in production.

Editorial

  • Placeholder text should be active. Start the text with a verb.
  • Don’t end placeholder text with a period.
  • Use title case for placeholder text.

Accessibility

  • Use placeholder text to provide an example of the type of input you need from the user. For example, if you need a phone number in a certain format, include (123) 456-7890 as placeholder text.
  • Never use placeholder text in place of a label. See Labels for more information.
  • Include an aria-describedby attribute on each input that has an .mds-form__microcopy or an .mds-form__field-error component providing additional information. The value of the aria-describedby attribute must match the id attribute on the .mds-form__microcopy or .mds-form__field-error component.
  • Always pair a Label with an input. Include a for attribute on each label with a value matching the id attribute on the corresponding input.

Code Reference

  • Always wrap grouped form elements in a mds-form__field-group container.
<div class="mds-form__field-group">
    <label class="mds-form__label" for="first-name">First Name</label>
    <input class="mds-form__input" type="text" id="first-name" placeholder="First Name" />
</div>
  • This component uses a box-shadow property to create an outline. Internet Explorer and Safari have known issues rendering these outlines when using the browser's zoom functionality. This visual defect doesn't affect the functionality of the component.

CSS Class References

Class
Applies to
Outcome

mds-form__input--small

mds-form__input

Applies small styles to the input.

mds-form__input--large

mds-form__input

Applies large styles to the input.

©2018 Morningstar, Inc. All rights reserved. Terms of Use