Text Fields

Textarea resizing can be enabled using the classes .resize .resize-x .resize-y .

            
              <input class="input" type="text" placeholder="Username" />
              <textarea class="input" name="textarea" id="textarea" placeholder="Description" cols="30" rows="10"></textarea>
            
          

Form Validation

To add validation to a input, add the class .validate to the input element.

To force the input to valid or invalid states, add the class .input-valid or .input-invalid to the input element.

            
            <input class="input validate" type="number" placeholder="Enter a number between 0 & 10" min="1" max="10" required />
            <input class="input input-valid" type="text" placeholder="Email" />
            <input class="input input-invalid" type="text" placeholder="Password" />
            
          

Other Fields

            
              <input class="input" type="date" name="date" />
              <input class="input" type="time" name="time" />
              <input class="input" type="file" name="file" />
              <label>
                    <input class="input" type="checkbox" name="checkbox" />
                    Checkbox
              </label>
              <label>
                    <input class="input" type="radio" name="radio" />
                    Option 1
              </label>