.input selector is simply an alias for the
.field selector. It’s possible that input-specific features will be added in the future.
Multiple (adjacent) inputs — You can build adjacent inputs by removing the left or right border from the fields and setting their x-margin to zero. Beware that using adjacent fields can result in a poor user experience on mobile.
Inputs have full tone, priority, and disabling support. Priorities are communicated through elevation.
Use Aria roles and labels. When building forms, it’s easy to rely on visual guidelines to show relationships between elements. Unfortunately, this doesn’t help those interacting with your site using a screenreader or other assistive technologies. For this reason, it’s important to use ARIA labels and roles wherever possible.
Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a
Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!
Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).
||color||—||sets default border color|
||sets the speed of the hover and focus transition|
||box shadow||—||sets the base box shadow|
||sets the opacity of disabled fields|
||sets additional box shadow on hover|
||sets additional box shadow on focus|
You can also customize this element by simply overriding any of its CSS attributes, listed
here. Contextual variable defaults (e.g.,
--color-content) and global
--family-primary) are defined here.