Forms

TaylorUI uses react-aria-components to build accessible forms and provides a set of pre-built form elements.

Examples

Simple Form

A simple login form with email and password fields.

  • Inputs are validated client side.
  • Errors are displayed inline next to each invalid input.

Field error summary

For forms with more than a couple of inputs, it's a good idea to display a field error summary at the top of the form. This helps screen reader users get a better idea of which fields need corecting, and let them navigate easily to the invalid fields.

  • Inputs are validated client side.
  • Errors are displayed in a summary at the top of the form.
  • Errors are also displayed inline next to each invalid input.
Please enter your full name without any middle names
Please enter a valid email address. Example: test@test.com
Please enter your phone number with the country code. Example: +43
Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, and one number.
Favorite Animal (Required)
Preferred Contact Method (Required)
Read our full Terms and Conditions

Form Components

Text Field

A text field is a single line input for text.

Please enter your username
<TextField
  id="login-username"
  name="username"
  label="Username"
  autoComplete="username"
  description="Please enter your username"
/>

Select

Favorite AnimalAre you a cat, dog or snake person?
<Select
  id="favoriteAnimal"
  name="favoriteAnimal"
  label="Favorite Animal"
  description="Are you a cat, dog or snake person?"
>
  <SelectItem id="cat">Cat</SelectItem>
  <SelectItem id="dog">Dog</SelectItem>
  <SelectItem id="snake">Snake</SelectItem>
</Select>

Checkbox

<Checkbox
  id="terms-and-conditions"
  name="terms-and-conditions"
  label="I agree to the terms and conditions"
/>

Radio

Preferred Contact Method
<RadioGroup
  id="preferred-contact-method"
  name="preferred-contact-method"
  label="Preferred Contact Method"
>
  <Radio value="email">Email</Radio>
  <Radio value="phone">Phone</Radio>
  <Radio value="sms">SMS</Radio>
</RadioGroup>