Input

.input is for input elements that accept text input.

Applicable Elements

• input (with types that accept text input)

Basic Usage

<input class="input" type="text" placeholder="Text Input" />
<input class="input" type="number" placeholder="Numeric" style="width: 120px;" />
<input class="input" type="datetime-local" />

States

<input class="input error" type="text" placeholder="Error" />
<input class="input" type="datetime-local" disabled />

React component Advanced

<Input/> renders a single <input class="input" /> element.

It inherits the error property from a Fieldset component and automatically applies the error style.

Q&A

How do I customize the outline shown on focus?

You can set the outline property in CSS.
However, we recommend keeping the default outline for accessibility.