Morningstar Design System

Inputs

Variations Design Guidelines Code Reference Accessibility

Inputs
updated

  • HTML/CSS Available
  • Web Component Beta
  • Last Updated

    2.17.0

Inputs allow a user to input and interact with data.

See Forms for guidance on composing full forms.

Variations Design Guidelines Code Reference Accessibility

Variations

Default

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

Default
Hover
Focus
Default
Hover
Focus
HTML Web Component 
<input class="mds-form__input" type="text" id="input-1">
<mds-input id="input-4"></mds-input>
Disabled
Disabled
HTML Web Component 
<input class="mds-form__input" type="text" id="input-7" disabled>
<mds-input id="input-8" disabled></mds-input>
With Placeholder
With Placeholder
HTML Web Component 
<input class="mds-form__input" type="text" id="input-9" placeholder="First Name">
<mds-input placeholder="First Name" id="input-10"></mds-input>
  • 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.
  • Always wrap grouped form elements in a mds-form__field-group container. See the Forms composition section for more guidelines on constructing forms.
<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>

Sizing

Sizing affects input size, text size and internal spacing. The default size is medium, and you can use modifier classes or props to make the input smaller or larger.

Small
Medium (Default)
Large
Small
Medium (Default)
Large
HTML Web Component 
<input class="mds-form__input mds-form__input--small" type="text" id="small-text-box" placeholder="First Name">
<mds-input size="small" placeholder="First Name" id="small-text-box-wc"></mds-input>

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.

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.

Web Component

Props

Prop
Type
Validation
Default
Description

ariaDescribedby

String

—

—

A space-separated list of element id, like microcopy or a field errors, whose content contains information about the input.

ariaInvalid

String

One of: false, true, grammar, spelling

false

Sets aria-invalid attribute.

autocomplete

String

—

—

Adds autocomplete attribute. See available values.

class

String

—

—

A space-separated list of class names that will be appended to the default mds-form__input element.

disabled

Boolean

—

false

If true, sets the disabled attribute on the input, rendering it non-interactive, and applies disabled styling.

id

String

Required

—

The id attribute for the HTML element.

max

Number

—

—

Maximum for type number.

maxlength

Number

—

—

If provided, sets the maximum number of characters allowed.

min

Number

—

—

Minimum for type number.

minlength

Number

—

—

If provided, sets the minimum number of characters allowed.

name

String

—

—

Adds the name attribute to the input element.

pattern

String

—

—

RegExp pattern for value to be validated against.

placeholder

String

—

—

Adds placeholder text.

readonly

Boolean

—

false

Adds the readonly attribute.

required

Boolean

—

false

If true, adds the required attribute.

size

String

One of: small, medium, large

medium

Alters the size of the input.

step

Number

Conditional based on type="number"

—

Sets the increment for the input. Only valid for type="number".

type

String

One of: email, number, password, tel, text, url

text

Sets the type attribute for the <input>.

value

String

—

—

Text value for the input.
  • Use kebab-case when setting props in HTML. For example, ariaDescribedby would be written as aria-describedby.

Usage Examples

Setting size, required, and placeholder via props:

<mds-input size="small" placeholder="First Name" id="tooltip-id" required></mds-input>

Setting value, aria-describedby, and readonly via props:

<mds-input value="Jane" aria-describedy="first-name-label" id="tooltip-id" readonly></mds-input>

Setting type, minlength and required via props:

<mds-input type="password" minlength="8" id="tooltip-id" required></mds-input>

Browser Support

  • 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.
  • When using the minlength property in Edge v17+, if required isn’t set, and the user didn’t specify a value, minlength has no affect.

Implementation

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

Best Practices

  • Never use placeholder text in place of a label. See Labels for more information.