Inputs
Basic text inputs allow users to type words into a field. Use them in search boxes and form fields that require the user to enter free-text that is only a few words long or would fit on one line.
Overview
Inputs should be used with input group containers. For text entries longer than a single line, use a text area instead.
Inputs come in two sizes: small and medium, with medium as the default. The ['medium'] size has a tablet/mobile breakpoint of 1024 px. On tablet and mobile screens, it will shrink to better fit the limited content area while still retaining a large touch target area. Use ['small'] inputs only with specific components, such as data tables.
Design and Layout
On mobile devices, input fields should span the full width of the content area. Input fields on larger viewports will vary in width depending on a variety of factors, such as the type of input and the width of other inputs on the page.
Style Variations
Inputs have different colors, effects, and line weights based on their state. These variations enhance usability by providing visual feedback to users.
| STATE | EXAMPLE |
|---|---|
| Default |  |
| Focus |  |
| Error |  |
| Disabled |  |
Installation
Props
No records available |
Events
No records available |