Forms

The framework comes with a bunch of input style utility classes out of the box. Details are as follows:-

• form-control - special class to be applied on input fields
• form-error - used to indicate input error validation
• form-success - used to indicate input success validation

Text input

<div class="row">
   <div class="col">
      <label for="test">Test</label>
      <div class="small text-muted">Enter something</div>
      <input class="form-control" placeholder="testing" /> 
   </div>
</div>

Text area

<div class="row">
   <div class="col">
      <label for="test">Test</label>
        <div class="small text-muted">Enter something</div>
      <textarea class="form-control" placeholder="testing" rows="4"></textarea> 
   </div>
</div>

Selects

<div class="row">
   <div class="col">
      <label for="test">Test</label>
       <div class="small text-muted">Enter something</div>
      <select class="form-select" aria-label="Default select example">
         <option selected>Open this select menu</option>
         <option value="1">One</option>
         <option value="2">Two</option>
         <option value="3">Three</option>
      </select>
      
   </div>
</div>

Checkboxes

<label for="checkbox">Checkboxes</label>
<div class="form-group">
   <input type="checkbox" id="a" class="form-check-input"> 
   <label for="a">a </label>
   <input type="checkbox" id="b" class="form-check-input"> 
   <label for="b">b </label>
</div>

Radio

<label for="radio">Radio</label>
<div class="form-group">
   <input type="radio" id="c" class="form-check-input" name="foo"> 
   <label for="c">c </label>
   <input type="radio" id="d" class="form-check-input" name="foo"> 
   <label for="d">d </label>
</div>

File input

<div class="form-group">
   <file-upload name="foobaz"> </file-upload>
</div>

Form errors

<div class="row">
   <div class="col">
      <label for="test">Test</label>
      <input class="form-control form-error" placeholder="testing" value="Error" /> 
      <div class="small text-danger">Contains errors</div>
   </div>
</div>

Form success

<div class="row">
   <div class="col">
      <label for="test">Test</label>
      <input class="form-control form-success" placeholder="testing" value="Success" /> 
      <div class="small text-success">Success</div>
   </div>
</div>

Inline form inputs

To handle inline forms simply use our row column grid system as shown below

<div class="row">
   <div class="col-6">
      <label for="test">Test</label>
      <div class="small text-muted">Enter something</div>
      <input class="form-control" placeholder="testing" /> 
   </div>
  <div class="col-6">
      <label for="test">Test</label>
        <div class="small text-muted">Enter something</div>
      <input class="form-control" placeholder="testing" /> 
   </div>
</div>