Form elements

Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly.

Classic inputs

Use classic, user-friendly inputs, label them appropriately and include input placeholders that will help users avoid confusion when completing a form. Add the form-control class to style your input controls.

<input type="text" class="form-control" name="example-text-input" placeholder="Input placeholder" />

All variants of the input control are available in the examples below:

Form control rounded

Use the form-control-rounded class if you prefer form controls with rounded corners.

<div class="mb-3">
  <label class="form-label">Form control rounded</label>
  <input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text.." />
  <div class="input-icon">
    <input type="text" value="" class="form-control form-control-rounded" placeholder="Search…" />
    <span class="input-icon-addon">
      <!-- SVG icon from http://tabler.io/icons/icon/search -->
      <svg>...</svg>
    </span>
  </div>
</div>

Form control flush

You can remove borders from your form control by adding the form-control-flush class.

Input with icon

Add icons to your input controls to suggest users what they should enter or inform them of the current state of a form element.

Separated inputs

Include an additional element in your input section, such as a button which can be used to submit the information enetered in the input control.

Textarea and select

Use a multi-line text input control to enable users to enter longer pieces of text. The control will automatically adjust to the length of the text entered.

Add one of the available selects - either a dropdown or a multiple choice select - to let users choose from a predefined set of options.

Input size

Choose the size of an input control that will go well with your form design. Apart from the default size, you can also use small and large input controls.

Datalists

Use the datalist element to add an autocomplete feature to your input control. The list of available options will display once a user starts to type and will make it quicker to complete form sections.

Toggle switches

Use toggle switches for the elements of your form which require choosing between two opposing states.

Radios

Use radio buttons for the parts of your form which require users to choose one option from a set of two or more mutually exclusive options.

Checkboxes

Use checkoxes if you want to allow users to select more than one option from a set of predefined options or to turn an option on or off.

Range input

Add a range slider to make it possible for users to set a value or range, such as a price range or a time frame.

Input group

Create a group of input controls and place add-ons on either side of an input.

Input with checkboxes or radios

Add checkboxes or radio buttons on either side of your input control.

Input with prepended or appended text

Add text to your input control, either before or after the text which is to be entered by a user.

Input with appended link

Include a link in your input control to add a clickable element within the control.

Input with appended <kbd>

Include a <kbd> in your input control to add shortcut to the control.

Input with appended icon links

Add an icon link which you want to display at the end of your input control to visually represent actions which a user can take.