logo small logo dark logo small logo
logo small logo dark logo small logo

Form Elements

  1. Forms
  2. Form Elements

Input Types

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

A block of help text that breaks onto a new line and may extend beyond one line.
Multiple select

Select Menu

Custom <select> menus need only a custom class, .form-select to trigger the custom styles.

Select Menu Sizing

You may also choose from small and large custom selects to match our similarly sized text inputs.

Checkboxes & radios

Checkbox
Radios

Switches

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute.

Input Sizes & Group

Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.

@
Action Another action Something else here Separated link

Basic Example

We'll never share your email with anyone else.

Horizontal form

Inline Form

Use the .col-auto class to create horizontal layouts.

Auto-sizing
@

Form grid

You may also swap .row for .row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.

Floating labels

Create beautifully simple form labels that float over your input fields.

© Drezoc

Design & Develop by MyraStudio