Input fields

We have a collection of input field components to use in your forms. These are designed to be a thin, styled wrapper around the native input elements, allowing you to integrate them with various form libraries.

Usage

You can use the <InputGroup> component to group one or more input fields with a label.

The <Input> component is a styled wrapper around the native <input> element, and the <Select> component is a styled wrapper around the native <select> element.

<InputGroup label="Your name" htmlFor="name">
	<Input id="name" placeholder="Enter your name" value="Josh Appletree" />
</InputGroup>

Here’s a simple example of multiple input groups:

Text inputs

The <Input> component is a styled wrapper around the native <input> element.

It has a few neat tricks:

Suffixes

You can add a suffix to the input field, which will be displayed on the right side:

Loading state

You can add a aria-busy="true" prop to show a loading spinner.

This uses the ARIA default field to indicate that the field is busy, which is also useful for screen readers.

You can also control this property using JavaScript:

const input = document.querySelector('...');
 
// set:
input.ariaBusy = true;
 
// reset:
input.ariaBusy = '';