Forms - Basic inputs | Vuexy - Bootstrap 5 Admin Template

Basic inputs

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Inputs

Default

Default input style with .form-text. For more details, read Form overview.

Preview
HTML

Name

We'll never share your details with anyone else.

<div class="mb-3">
  <label for="defaultFormControlInput" class="form-label">Name</label>
  <input type="text" class="form-control" id="defaultFormControlInput" placeholder="John Doe" aria-describedby="defaultFormControlHelp" />
  <div id="defaultFormControlHelp" class="form-text">We'll never share your details with anyone else.</div>
</div>

Float

Wrap <input class="form-control"> and <label> in .form-floating to enable floating labels with Bootstrap’s textual form fields. For more details, read Floating labels Documentation.

Preview
HTML

Name

We'll never share your details with anyone else.

<div class="form-floating">
  <input type="text" class="form-control" id="floatingInput" placeholder="John Doe" aria-describedby="floatingInputHelp" />
  <label for="floatingInput">Name</label>
  <div id="floatingInputHelp" class="form-text">We'll never share your details with anyone else.</div>
</div>

Form Controls

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

Preview
HTML

Email address

Read only

Read plain

Example select

Datalist example

Example multiple select

Example textarea

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com" />
</div>
<div class="mb-3">
  <label for="exampleFormControlReadOnlyInput1" class="form-label">Read only</label>
  <input class="form-control" type="text" id="exampleFormControlReadOnlyInput1" placeholder="Readonly input here..." readonly />
</div>
<div class="mb-3">
  <label for="exampleFormControlReadOnlyInputPlain1" class="form-label">Read plain</label>
  <input type="text" readonly class="form-control-plaintext" id="exampleFormControlReadOnlyInputPlain1" value="email@example.com" />
</div>
<div class="mb-3">
  <label for="exampleFormControlSelect1" class="form-label">Example select</label>
  <select class="form-select" id="exampleFormControlSelect1" 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 class="mb-3">
  <label for="exampleDataList" class="form-label">Datalist example</label>
  <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
  <datalist id="datalistOptions">
    <option value="San Francisco">
    <option value="New York">
    <option value="Seattle">
    <option value="Los Angeles">
    <option value="Chicago">
  </datalist>
</div>
<div class="mb-3">
  <label for="exampleFormControlSelect2" class="form-label">Example multiple select</label>
  <select multiple class="form-select" id="exampleFormControlSelect2" aria-label="Multiple 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>
  <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

Sizing Text Input

Set heights using classes like .form-control-lg and .form-control-sm.

Preview
HTML

Large input

Default input

Small input

Rounded input

<div class="mb-3">
  <label for="largeInput" class="form-label">Large input</label>
  <input id="largeInput" class="form-control form-control-lg" type="text" placeholder=".form-control-lg" />
</div>
<div class="mb-3">
  <label for="defaultInput" class="form-label">Default input</label>
  <input id="defaultInput" class="form-control" type="text" placeholder="Default input" />
</div>
<div class="mb-3">
  <label for="smallInput" class="form-label">Small input</label>
  <input id="smallInput" class="form-control form-control-sm" type="text" placeholder=".form-control-sm" />
</div>
<div class="mb-3">
  <label for="smallInput" class="form-label">Rounded input</label>
  <input id="smallInput" class="form-control rounded-pill" type="text" placeholder="Rounded Pill" />
</div>

Class	Value
`class="form-control-{value}"`	lg \| sm

Sizing Select Input

Set heights using classes like .form-select-lg and .form-select-sm.

Preview
HTML

Large select

Default select

Small select

<div class="mb-3">
  <label for="largeSelect" class="form-label">Large select</label>
  <select id="largeSelect" class="form-select form-select-lg">
    <option>Large select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
<div class="mb-3">
  <label for="defaultSelect" class="form-label">Default select</label>
  <select id="defaultSelect" class="form-select">
    <option>Default select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
<div>
  <label for="smallSelect" class="form-label">Small select</label>
  <select id="smallSelect" class="form-select form-select-sm">
    <option>Small select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

Class	Value
`class="form-select-{value}"`	lg \| sm

File input

File input to upload single, multiple files with sizing options.

Preview
HTML

Default file input example

Multiple files input example

Disabled file input example

Small file input example

Large file input example

<div class="mb-3">
  <label for="formFile" class="form-label">Default file input example</label>
  <input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
  <label for="formFileMultiple" class="form-label">Multiple files input example</label>
  <input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
  <label for="formFileDisabled" class="form-label">Disabled file input example</label>
  <input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="mb-3">
  <label for="formFileSm" class="form-label">Small file input example</label>
  <input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
  <label for="formFileLg" class="form-label">Large file input example</label>
  <input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

Checkboxes and Radios

Create consistent cross-browser and cross-device checkboxes and radios with our checks component.

Default (stacked)

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check.

Preview
HTML

Checkboxes

Unchecked

Indeterminate

Checked

Disabled Unchecked

Disabled Checked

Radio

Unchecked

Checked

Disabled unchecked

Disabled checkbox

<div class="row">
  <div class="col-sm">
    <small class="text-light fw-medium">Checkboxes</small>
    <div class="form-check mt-4">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck1" />
      <label class="form-check-label" for="defaultCheck1">
        Unchecked
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" checked />
      <label class="form-check-label" for="defaultCheck2">
        Indeterminate
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck3" checked />
      <label class="form-check-label" for="defaultCheck3">
        Checked
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="disabledCheck1" disabled />
      <label class="form-check-label" for="disabledCheck1">
        Disabled Unchecked
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="disabledCheck2" disabled checked />
      <label class="form-check-label" for="disabledCheck2">
        Disabled Checked
      </label>
    </div>
  </div>

  <div class="col-sm">
    <small class="text-light fw-medium">Radio</small>
    <div class="form-check mt-4">
      <input name="default-radio-1" class="form-check-input" type="radio" value="" id="defaultRadio1" />
      <label class="form-check-label" for="defaultRadio1">
        Unchecked
      </label>
    </div>
    <div class="form-check">
      <input name="default-radio-1" class="form-check-input" type="radio" value="" id="defaultRadio2" checked />
      <label class="form-check-label" for="defaultRadio2">
        Checked
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" value="" id="disabledRadio1" disabled />
      <label class="form-check-label" for="disabledRadio1">
        Disabled unchecked
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" value="" id="disabledRadio2" disabled checked />
      <label class="form-check-label" for="disabledRadio2">
        Disabled checkbox
      </label>
    </div>
  </div>
</div>

Inline

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.

Preview
HTML

Inline Checkboxes

3 (disabled)

Inline Radio

3 (disabled)

<div class="row">
  <div class="col-md">
    <small class="text-light fw-medium d-block">Inline Checkboxes</small>
    <div class="form-check form-check-inline mt-4">
      <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1" />
      <label class="form-check-label" for="inlineCheckbox1">1</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2" />
      <label class="form-check-label" for="inlineCheckbox2">2</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled />
      <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
    </div>
  </div>

  <div class="col-md">
    <small class="text-light fw-medium d-block">Inline Radio</small>
    <div class="form-check form-check-inline mt-4">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" />
      <label class="form-check-label" for="inlineRadio1">1</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" />
      <label class="form-check-label" for="inlineRadio2">2</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled />
      <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
    </div>
  </div>
</div>

Variations

Vuexy support several predefined checkbox & radio styles variations.

Preview
HTML

<div class="row">
  <div class="col-md">
    <small class="text-light fw-medium d-block">Checkboxes Colors</small>
    <div class="form-check form-check-primary mt-4">
      <input class="form-check-input" type="checkbox" value="" id="customCheckPrimary" checked />
      <label class="form-check-label" for="customCheckPrimary">Primary</label>
    </div>
    <div class="form-check form-check-secondary">
      <input class="form-check-input" type="checkbox" value="" id="customCheckSecondary" checked />
      <label class="form-check-label" for="customCheckSecondary">Secondary</label>
    </div>
    <div class="form-check form-check-success">
      <input class="form-check-input" type="checkbox" value="" id="customCheckSuccess" checked />
      <label class="form-check-label" for="customCheckSuccess">Success</label>
    </div>
    <div class="form-check form-check-danger">
      <input class="form-check-input" type="checkbox" value="" id="customCheckDanger" checked />
      <label class="form-check-label" for="customCheckDanger">Danger</label>
    </div>
    <div class="form-check form-check-warning">
      <input class="form-check-input" type="checkbox" value="" id="customCheckWarning" checked />
      <label class="form-check-label" for="customCheckWarning"> Warning </label>
    </div>
    <div class="form-check form-check-info">
      <input class="form-check-input" type="checkbox" value="" id="customCheckInfo" checked />
      <label class="form-check-label" for="customCheckInfo"> Info </label>
    </div>
    <div class="form-check form-check-dark">
      <input class="form-check-input" type="checkbox" value="" id="customCheckDark" checked />
      <label class="form-check-label" for="customCheckDark"> Dark </label>
    </div>
  </div>

  <div class="col-md">
    <small class="text-light fw-medium d-block">Radio Color</small>
    <div class="form-check form-check-primary mt-4">
      <input name="customRadioPrimary" class="form-check-input" type="radio" value="" id="customRadioPrimary" checked />
      <label class="form-check-label" for="customRadioPrimary"> Primary </label>
    </div>
    <div class="form-check form-check-secondary">
      <input name="customRadioSecondary" class="form-check-input" type="radio" value="" id="customRadioSecondary" checked />
      <label class="form-check-label" for="customRadioSecondary"> Secondary </label>
    </div>
    <div class="form-check form-check-success">
      <input name="customRadioSuccess" class="form-check-input" type="radio" value="" id="customRadioSuccess" checked />
      <label class="form-check-label" for="customRadioSuccess"> Success </label>
    </div>
    <div class="form-check form-check-danger">
      <input name="customRadioDanger" class="form-check-input" type="radio" value="" id="customRadioDanger" checked />
      <label class="form-check-label" for="customRadioDanger"> Danger </label>
    </div>
    <div class="form-check form-check-warning">
      <input name="customRadioWarning" class="form-check-input" type="radio" value="" id="customRadioWarning" checked />
      <label class="form-check-label" for="customRadioWarning"> Warning </label>
    </div>
    <div class="form-check form-check-info">
      <input name="customRadioInfo" class="form-check-input" type="radio" value="" id="customRadioInfo" checked />
      <label class="form-check-label" for="customRadioInfo"> Info </label>
    </div>
    <div class="form-check form-check-dark">
      <input name="customRadioDark" class="form-check-input" type="radio" value="" id="customRadioDark" checked />
      <label class="form-check-label" for="customRadioDark"> Dark </label>
    </div>
  </div>
</div>

Class	Value
`class="form-check form-check-{value}"`	primary \| secondary \| success \| danger \| warning \| info \| dark

Form range

Use our custom range inputs for consistent cross-browser styling and built-in customization.

Preview
HTML

Example range

Disabled range

Min and max

Steps

<div class="mb-3">
  <label for="formRange1" class="form-label">Example range</label>
  <input type="range" class="form-range" id="formRange1">
</div>
<div class="mb-3">
  <label for="disabledRange" class="form-label">Disabled range</label>
  <input type="range" class="form-range" id="disabledRange" disabled>
</div>
<div class="mb-3">
  <label for="formRange2" class="form-label">Min and max</label>
  <input type="range" class="form-range" min="0" max="5" id="formRange2">
</div>
<div>
  <label for="formRange3" class="form-label">Steps</label>
  <input type="range" class="form-range" min="0" max="5" step="0.5" id="formRange3">
</div>

HTML5 Inputs

Examples and usage HTML5 inputs.

Preview
HTML

Text

URL

Phone

Password

Number

Datetime

Date

Month

Week

Time

Color

Range

<form>
  <div class="mb-3 row">
    <label for="html5-text-input" class="col-md-2 col-form-label">Text</label>
    <div class="col-md-10">
      <input class="form-control" type="text" value="Vuexy" id="html5-text-input" />
    </div>
  </div>
  <div class="mb-3 row">
    <label for="html5-search-input" class="col-md-2 col-form-label">Search</label>
    <div class="col-md-10">
      <input class="form-control" type="search" value="Search ..." id="html5-search-input" />
    </div>
  </div>
  <div class="mb-3 row">
    <label for="html5-email-input" class="col-md-2 col-form-label">Email</label>
    <div class="col-md-10">
      <input class="form-control" type="email" value="john@example.com" id="html5-email-input" />
    </div>
  </div>
  <div class="mb-3 row">
    <label for="html5-url-input" class="col-md-2 col-form-label">URL</label>
    <div class="col-md-10">
      <input class="form-control" type="url" value="https://pixinvent.com" id="html5-url-input" />
    </div>
  </div>
  <div class="mb-3 row">
    <label for="html5-tel-input" class="col-md-2 col-form-label">Phone</label>
    <div class="col-md-10">
      <input class="form-control" type="tel" value="90-(164)-188-556" id="html5-tel-input" />
    </div>
  </div>
  <div class="mb-3 row">
    <label for="html5-password-input" class="col-md-2 col-form-label">Password</label>
    <div class="col-md-10">
      <input class="form-control" type="password" value="password" id="html5-password-input" />
    </div>
  </div>
  <div class="mb-3 row">
    <label for="html5-number-input" class="col-md-2 col-form-label">Number</label>
    <div class="col-md-10">
      <input class="form-control" type="number" value="18" id="html5-number-input" />
    </div>
  </div>
  <div class="mb-3 row">
    <label for="html5-datetime-local-input" class="col-md-2 col-form-label">Datetime</label>
    <div class="col-md-10">
      <input class="form-control" type="datetime-local" value="2021-06-18T12:30:00" id="html5-datetime-local-input" />
    </div>
  </div>
  <div class="mb-3 row">
    <label for="html5-date-input" class="col-md-2 col-form-label">Date</label>
    <div class="col-md-10">
      <input class="form-control" type="date" value="2021-06-18" id="html5-date-input" />
    </div>
  </div>
  <div class="mb-3 row">
    <label for="html5-month-input" class="col-md-2 col-form-label">Month</label>
    <div class="col-md-10">
      <input class="form-control" type="month" value="2021-06" id="html5-month-input" />
    </div>
  </div>
  <div class="mb-3 row">
    <label for="html5-week-input" class="col-md-2 col-form-label">Week</label>
    <div class="col-md-10">
      <input class="form-control" type="week" value="2021-W25" id="html5-week-input" />
    </div>
  </div>
  <div class="mb-3 row">
    <label for="html5-time-input" class="col-md-2 col-form-label">Time</label>
    <div class="col-md-10">
      <input class="form-control" type="time" value="12:30:00" id="html5-time-input" />
    </div>
  </div>
  <div class="mb-3 row">
    <label for="html5-color-input" class="col-md-2 col-form-label">Color</label>
    <div class="col-md-10">
      <input class="form-control" type="color" value="#666EE8" id="html5-color-input" />
    </div>
  </div>
  <div class="row">
    <label for="html5-range" class="col-md-2 col-form-label">Range</label>
    <div class="col-md-10">
      <input type="range" class="form-range mt-4" id="html5-range" />
    </div>
  </div>
</form>