Inputs

Allows a user to enter and edit data. Also used for search

Default

Basic input field with label.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Required

Basic input field with label and required tag.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Sizing

Change size for the input field. Default size is medium.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Bare

Input field with no label.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Multi-line input

Multiple line input field with expander control in lower right.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Input field with link text on right.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Input with icon above

Input field with icon above input field on right.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Input with helper text

Input field with helper or hint text below input field.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Input with icon inserted left

Input field with icon inserted into input field on left. Icon is decorative and not intended for any action.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Input with icon inserted right

Input field with icon inserted into input field on right. Icon is decorative and not intended for any action.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Accessibility

This component has compliance with WCAG guidelines by:

  • Requiring a value for the label field
  • When hiding a label, the aria-label attribute is set to the label value