Input

View Storybook

An input field is an input control that allows users to enter alphanumeric information. It can have a range of options and supports single line and multi-line lengths, as well as varying formats, including numbers, masked passwords, etc.

Classes

Class Applies to Description
d-input N/A Base input style.
d-input--xs d-input Applies extra small size.
d-input--sm d-input Applies small size.
d-input--lg d-input Applies large size.
d-input--xl d-input Applies extra large size.
d-input--warning d-input Styles input in a warning state.
d-input--error d-input Styles input in a error state.
d-input--success d-input Styles input in a success state.
d-input-icon d-input Styles input to have an icon.
d-input-icon--left d-input Styles for left icons, applied to the input.
d-input-icon--right d-input Styles for right icons, applied to the input.
d-input-icon--left d-input-icon Styles for left icons. applied to the icon wrapper.
d-input-icon--right d-input-icon Styles for right icons. applied to the icon wrapper.
d-textarea N/A Base textarea style.
d-textarea--xs d-textarea Applies extra small size.
d-textarea--sm d-textarea Applies small size.
d-textarea--lg d-textarea Applies large size.
d-textarea--xl d-textarea Applies extra large size.
d-textarea--warning d-textarea Styles textarea in a warning state.
d-textarea--error d-textarea Styles textarea in a error state.
d-textarea--success d-textarea Styles textarea in a success state.

Examples

Base Styles

An input is normally paired with a label, but there are times when it can be used without a label. Placeholder text should primarily be used as a content prompt and only provided when needed.

With Description Text

With Validation States

Provides feedback to the user based on their interaction, or lack thereof, with an input.

With Icons

Sizes

We offer different sizes for instances in which the interface requires a smaller or larger input. In general, though, use the base (medium) size input as much as possible, especially in forms.

Accessibility

  • Make sure the label for attribute match the input id.
  • Avoiding removing labels. Labelled inputs are user-friendly.
  • Avoid relying on placeholder text as a substitute for a label.
  • Placeholder text should not include critical information. Use description text for any information that helps the user successfully interact with the input.