--- layout : 'default' css : 'input' title : 'Input' description : 'Inputs allow a user to enter information' type : 'UI Element' --- <%- @partial('header') %>

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

Error

An input field can show the data contains errors

Variations

Icon

An input can be formatted with an icon

Labeled

An input can be formatted with a label



New

Action

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

Search
Add users

Fluid

An input can take the size of its container

Size

An input can vary in size