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. Fields are especially useful for textareas and text inputs.

Considerations

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.

Backwards compatability — Prior to v0.10.0, a17t had two other elements (.input and .textarea) that were identical to .field under the hood. For simplicity, these elements are all consolated under .field. Now, we recommend you just use .field. (That being said, .input and .textarea will continue to work — we don’t want your code to break!)

Variants

Fields have full tone support.

Example code

<input class="field ~neutral m-2 w-auto" placeholder="Type something..." type="text">

<input class="field ~positive m-2 w-auto" placeholder="Type something..." type="text">

<input class="field ~warning m-2 w-auto" placeholder="Type something..." type="text">

<input class="field ~critical m-2 w-auto" placeholder="Type something..." type="text">

<input class="field ~info m-2 w-auto" placeholder="Type something..." type="text">

<input class="field ~urge m-2 w-auto" placeholder="Type something..." type="text">

Disabling

Example code

<input class="field ~neutral" value="This is a disabled input" type="text" disabled>

Textareas

Example code

<textarea class='field ~neutral !normal' placeholder='Write something...'></textarea>

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>

Example code

<textarea class="field ~neutral !normal" rows="8">This textarea has 8 rows and actual content.</textarea>

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>