Types

Input

A standard input

States

Focus

An input field can show a user is currently interacting with it

Loading

An icon input field can show that it is currently loading data

Loading inputs automatically modify the input's icon on loading state to show loading indication

Disabled

An input field can show that it is disabled

Error

An input field can show the data contains errors

Variations

Icon

An input can be formatted with an icon

Input icons do not receive pointer-events unless a link icon is used.

Labeled

An input can be formatted with a label

Action

An input can be formatted to alert the user to an action they may perform

Transparent

A transparent input has no background

Inverted

An input can be formatted to appear on dark backgrounds

Fluid

An input can take the size of its container

Size

An input can vary in size

Inputs will automatically size themselves unless you manually declare a width