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!
<!-- Basic Input -->
<div class="input__container">
<input type="text" placeholder="Enter placeholder here" id="name" class="input__field">
</div>
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.
Success!
Success!
Implementation
Not everyone likes to be independent. Some prefer cute little nudges!
<!-- Input with top label -->
<div class="input__container">
<input type="text" placeholder="Enter Name" id="name" class="input__field demo--input">
<p class="input--msg">Success!</p>
<label for="name" class="input--toplabel">Full Name</label>
</div>
Validation States
The inputs also have 3 States shown below which can be toggled by using along with the respective states using --success, --warning and ---primary.
Success!
Ouch!
Implementation
Choices, Choices, so many beautiful choices!
<!-- Input Field Outline --Primary -->
<div class="input__container">
<input type="text" placeholder="Enter Name" id="name" class="input__field input__field--primary">
<label for="name" class="input--toplabel --primary">Full Name
</label>
</div>
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!
<!-- Input Field Outline --Primary -->
<div class="input__container">
<input type="text" placeholder="Enter Name" id="name" class="input__field input__field--primary tonal--primary">
<label for="name" class="input--toplabel --primary">Full Name</label>
</div>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!
<!-- Text Box -->
<textarea name="text-area" id="" cols="10" rows="5"></textarea>
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!
<!-- Radio Input -->
<div class="input__container">
<input type="radio" id="radio" class="input--field--radio input--demo" placeholder="Peter Parker" required="">
<label for="Radio" class="input--sidelabel radio__label">Your Name</label>
</div>
<!-- Checkbox Input -->
<div class="input__container">
<label for="checkbox" class="input--sidelabel">Your Name</label>
<input type="checkbox" id="checkbox" class=" input--field--checkbox input--demo" placeholder="Peter Parker" required="">
</div>