Inputs
The Input element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.
Basic Inputs
The Inputs are available in 3 sizes as shown below which can be toggled by using input__field--small, input__field--medium and input__field--large.
Implementation
Choose your Input size and off you go!
Labelled Inputs
The inputs also have a labelled variant as shown below which can be toggled by using input--toplabel , input--sidelabel and input__field--outline for outlined version.
Implementation
Not everyone likes to be independent. Some prefer cute little nudges!
Success!
Validation States
The inputs also have 3 States shown below which can be toggled by using --success, --warning and ---primary.
Success!
Ouch!
Implementation
Choices, Choices, so many beautiful choices!
Tonal Input States
The inputs also have 3 States shown below which can be toggled by using ---tonal along with the respective states using ---success, ---warning and ---primary.
Success!
Uh-Oh!
Implementation
Not everyone likes to be round and perfect. Some prefer cute corners!
Text Box
The text box can be used whenever you feel the need to vent or provide critical feedback which can be toggled by using input---textarea and editing the cols and rows section accordingly.
Implementation
Not everyone likes to be round and perfect. Some prefer cute corners!
Radio and Checkbox Input
The radio and checkbox inputs can be triggered by using input---field and then using ---checkbox and ---radio for the respective input types .
Implementation
Not everyone likes to be round and perfect. Some prefer cute corners!