<input type='text' class='field ~neutral !normal w-auto' placeholder='Hello world'>
Overview
Form fields are a fundamental interface element. They’re also hard to get right: you need to think about hover animations, focusing, overriding user-agent stylesheets, cursors, disabled states, ‘readonly’ inputs, validation, borders, line heights, and more. Fortunately, a17t does all this for you.
Apply a .field
selector whenever you want a form-style field to look nice. All the specialized field inputs are based off of this .field
element: Inputs, Selects, and Textareas.
Considerations
Specialized fields — The .field
element is a relatively low-level utility. Often, you’ll want to use a more specific element when you’re working with form inputs (see list above).
Multiple (adjacent) fields — You can build adjacent fields 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.
Variants
Fields have full tone, priority, and disabling support. Priorities are communicated through elevation.
Low Priority
Example code
<input class="field ~neutral !low mb-4 mr-4 w-auto" placeholder="Type something..." type="text">
<input class="field ~positive !low mb-4 mr-4 w-auto" placeholder="Type something..." type="text">
<input class="field ~warning !low mb-4 mr-4 w-auto" placeholder="Type something..." type="text">
<input class="field ~critical !low mb-4 mr-4 w-auto" placeholder="Type something..." type="text">
<input class="field ~info !low mb-4 mr-4 w-auto" placeholder="Type something..." type="text">
<input class="field ~urge !low mb-4 mr-4 w-auto" placeholder="Type something..." type="text">
Normal Priority
Example code
<input class="field ~neutral !normal mb-4 mr-4 w-auto" placeholder="Type something..." type="text">
<input class="field ~positive !normal mb-4 mr-4 w-auto" placeholder="Type something..." type="text">
<input class="field ~warning !normal mb-4 mr-4 w-auto" placeholder="Type something..." type="text">
<input class="field ~critical !normal mb-4 mr-4 w-auto" placeholder="Type something..." type="text">
<input class="field ~info !normal mb-4 mr-4 w-auto" placeholder="Type something..." type="text">
<input class="field ~urge !normal mb-4 mr-4 w-auto" placeholder="Type something..." type="text">
High Priority
Example code
<input class="field ~neutral !high mb-4 mr-4 w-auto" placeholder="Type something..." type="text">
<input class="field ~positive !high mb-4 mr-4 w-auto" placeholder="Type something..." type="text">
<input class="field ~warning !high mb-4 mr-4 w-auto" placeholder="Type something..." type="text">
<input class="field ~critical !high mb-4 mr-4 w-auto" placeholder="Type something..." type="text">
<input class="field ~info !high mb-4 mr-4 w-auto" placeholder="Type something..." type="text">
<input class="field ~urge !high mb-4 mr-4 w-auto" placeholder="Type something..." type="text">
Disabling
Example code
<input class="field ~neutral" value="This is a disabled input" type="text" disabled>
Accessibility
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 title
attribute.
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).
Examples
Your name
Just your first name is fine, too.
Example code
<div>
<p class="label">Your name</p>
<input class="my-1 field" type="text" placeholder="Miles McCain">
<p class="support">Just your first name is fine, too.</p>
</div>
Your name
That's an email, not a name!
Example code
<div>
<p class="label">Your name</p>
<input class="field my-1 ~critical" type="text" placeholder="Miles McCain" value="[email protected]">
<p class="support ~critical">That's an email, not a name!</p>
</div>
Customization
Name | Type | Default | Description |
---|---|---|---|
--color-light |
color | — | sets default border color |
--field-transition-speed |
time |
75ms
|
sets the speed of the hover and focus transition |
--fallback-box-shadow |
box shadow | — | sets the base box shadow |
--field-disabled-opacity |
opacity |
0.6
|
sets the opacity of disabled fields |
--field-hover-box-shadow |
box shadow |
0 0 1px 1px var(--color-light)
|
sets additional box shadow on hover |
--field-focus-box-shadow |
box shadow |
0 0 0 2px var(--color-light)
|
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
variables (e.g., --family-primary
) are defined here.