Go to main content
Version-1.3.0

Form Template

Collection of form controls.

When to use

  • Forms are used to collect the required information in a logical, meaningful fashion for communication and pass to another entity.

Guidelines

  • Size the input fields according to their expected input.
  • When errors are detected, provide both a global error message and a field-specific error.
  • Make it clear which fields are required and optional to all users.
  • Minimise user input, reduce fields to only the minimum needed
  • Be clear what type of input is expected.
  • Use autocomplete attributes to provide input purpose for personal information.
  • Provide clear and visible labels for each field.
  • Do not use placeholders if they provide helpful information, use visible hint labels instead.
  • Pre-fill fields with the most likely default values.

Basic

Group of form components aligned in vertical direction. 

<div class="row mb-3">
  <div class="col-6 xs-12">
    <label for="first-name" class="form-label">First name</label>
    <input type="text" class="form-control" id="first-name">
  </div>
  <div class="col-6 xs-12">
    <label for="last-name" class="form-label">Last name</label>
    <input type="text" class="form-control" id="last-name">
  </div>
</div>
<div class="row mb-3">
  <div class="col-6 xs-12">
    <label for="Gender" class="d-block">Gender</label>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="Gender" id="inlineRadio1" value="male">
      <label class="form-check-label" for="inlineRadio1">Male</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="Gender" id="inlineRadio2" value="female">
      <label class="form-check-label" for="inlineRadio2">Female</label>
    </div>
  </div>
  <div class="col-6 xs-12">
    <label for="hobbies" class="d-block">Hobbies</label>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" name="hobbies" id="reading" value="reading">
      <label class="form-check-label" for="reading">Reading</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" name="hobbies" id="sports" value="sports">
      <label class="form-check-label" for="sports">Sports</label>  </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" name="hobbies" id="driving" value="driving" >
      <label class="form-check-label" for="driving">Driving</label>
    </div>
  </div>
</div>
<div class="row mb-3">
  <div class="col-6 xs-12">
    <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="4"></textarea>
  </div>
  <div class="col-6 xs-12">
    <label for="hobbies" class="d-block">Hobbies</label>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
      <label class="form-check-label" for="flexSwitchCheckDefault"></label>
    </div>
  </div>
</div> 
<div class="row">
  <div class="col-12 xs-12 justify-content-end d-flex">
    <button type="button" class="btn btn-ghost me-2">Cancel</button>
    <button type="button" class="btn btn-primary">Submit</button>
  </div>
</div>

Sizes

Group of form components aligned in vertical direction with smaller input types. 

                      <div class="row mb-3">
                      <div class="col-6 xs-12">
                        <label for="first-name" class="form-label">First name</label>
                        <input type="text" class="form-control form-control-sm" id="first-name">
                      </div>
                      <div class="col-6 xs-12">
                        <label for="last-name" class="form-label">Last name</label>
                        <input type="text" class="form-control form-control-sm" id="last-name">
                      </div>
                    </div>
                    <div class="row mb-3">
                      <div class="col-6 xs-12">
                        <label for="Gender" class="form-label d-block">Gender</label>
                        <div class="d-flex align-items-center">
                          <div class="form-check form-check-inline d-flex align-items-center">
                            <input class="form-check-input input-sm" type="radio" name="Gender" id="inlineRadio1" value="male">
                            <label class="form-check-label" for="inlineRadio1">Male</label>
                          </div>
                          <div class="form-check form-check-inline d-flex align-items-center">
                            <input class="form-check-input input-sm" type="radio" name="Gender" id="inlineRadio2" value="female">
                            <label class="form-check-label" for="inlineRadio2">Female</label>
                          </div>
                        </div>
                        
                      </div>
                      <div class="col-6 xs-12">
                        <label for="hobbies" class="form-label d-block">Hobbies</label>
                        <div class="d-flex align-items-center">
                          <div class="form-check form-check-inline d-flex align-items-center">
                            <input class="form-check-input input-sm" type="checkbox" name="hobbies" id="reading" value="reading">
                            <label class="form-check-label" for="reading">Reading</label>
                          </div>
                          <div class="form-check form-check-inline d-flex align-items-center">
                            <input class="form-check-input input-sm" type="checkbox" name="hobbies" id="sports" value="sports">
                            <label class="form-check-label" for="sports">Sports</label>
                          </div>
                          <div class="form-check form-check-inline d-flex align-items-center">
                            <input class="form-check-input input-sm" type="checkbox" name="hobbies" id="driving" value="driving">
                            <label class="form-check-label" for="driving">Driving</label>
                          </div>
                        </div>
                        
                      </div>
                    </div>
                    <div class="row mb-3">
                      <div class="col-6 xs-12">
                        <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="4"></textarea>
                      </div>
                      <div class="col-6 xs-12">
                        <label for="hobbies" class="form-label d-block">Hobbies</label>
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                          <label class="form-check-label" for="flexSwitchCheckDefault"></label>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-12 xs-12 justify-content-end d-flex">
                        <button type="button" class="btn btn-ghost me-2 btn-sm">Cancel</button>
                        <button type="button" class="btn btn-primary btn-sm">Submit</button>
                      </div>
                    </div>

Horizontal Form

Labels will be placed besides input types in the horizontal form. 

                      <div class="horizontal-form-wrapper">
                      <div class="row mb-3">
                        <div class="col-6 xs-12 d-flex align-items-center">
                          <label for="first-name" class="form-label">First name</label>
                          <input type="text" class="form-control" id="first-name">
                        </div>
                        <div class="col-6 xs-12 d-flex align-items-center">
                          <label for="last-name" class="form-label">Last name</label>
                          <input type="text" class="form-control" id="last-name">
                        </div>
                      </div>
                      <div class="row mb-3">
                        <div class="col-6 xs-12 d-flex align-items-center">
                          <label for="Gender" class="form-label d-block">Gender</label>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Gender" id="inlineRadio1" value="male">
                            <label class="form-check-label" for="inlineRadio1">Male</label>
                          </div>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="Gender" id="inlineRadio2" value="female">
                            <label class="form-check-label" for="inlineRadio2">Female</label>
                          </div>
                        </div>
                        <div class="col-6 xs-12 d-flex align-items-center">
                          <label for="hobbies" class="form-label d-block">Hobbies</label>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="hobbies" id="reading" value="reading">
                            <label class="form-check-label" for="reading">Reading</label>
                          </div>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="hobbies" id="sports" value="sports">
                            <label class="form-check-label" for="sports">Sports</label>
                          </div>
                          
                        </div>
                      </div>
                      <div class="row mb-3">
                        <div class="col-6 xs-12 d-flex align-items-center">
                          <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
                          <textarea class="form-control" id="exampleFormControlTextarea1" rows="4"></textarea>
                        </div>
                        <div class="col-6 xs-12 d-flex align-items-center">
                          <label for="hobbies" class="form-label d-block">Hobbies</label>
                          <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                            <label class="form-check-label" for="flexSwitchCheckDefault"></label>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-12 xs-12 justify-content-end d-flex">
                          <button type="button" class="btn btn-ghost me-2">Cancel</button>
                          <button type="button" class="btn btn-primary">Submit</button>
                        </div>
                      </div>
                    </div>

Accessibility

  • Use semantic HTML elements to structure your Form. For example, use <form>, <input>, <label>, and <button> elements appropriately. This helps screen readers and other assistive technologies understand the purpose and structure of the Form.
  • Every form control (such as text inputs, checkboxes, and radio buttons) should have a clear and associated label. Use the <label> element and ensure it is associated with its corresponding input using the for attribute or by nesting the input inside the label.
  • Provide clear and descriptive error messages when a user submits invalid data. These messages should be programmatically associated with the input field that triggered the error and should be announced by screen readers.
When to use Guidelines Basic Sizes Horizontal Form Accessibility