Input

.input is for input elements which accept text input.

Applicable Elements

• input (with types which 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

React component <Input/> is available.
It inherits the error property from a Fieldset component and automatically applies the error style.

※ The disabled state is automatically inherited through the native HTML feature.

Q&A

How to customize the bold line that appears when focused?

You can set outline property in CSS.
Though it is recommended to leave it as default for accessibility.