Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# Forms

Form control styles, layout options, and custom components.

Bootstrap docs

Range slider depends on noUISlider plugin. Make sure to link to noUISlider css and js files in your document: assets/vendor/nouislider/dist/nouislider.min.css and assets/vendor/nouislider/dist/nouislider.min.js. Use this page as a reference.

To enable input text content formatting please make sure to link to Cleave.js plugin in your document: assets/vendor/cleave.js/dist/cleave.min.js. Use this page as a reference.

## Supported input types

Text
Search
Email
URL
Phone
Password
Textarea
Hello World!
Select
Multiselect
File
Number
Datalist
Range
Color

    <!-- Text input -->
    <div class="mb-4">
      <label for="text-input" class="form-label">Text</label>
      <input class="form-control" type="text" id="text-input" value="Artisanal kale">
    </div>

    <!-- Search input -->
    <div class="mb-4">
      <label for="search-input" class="form-label">Search</label>
      <input class="form-control" type="search" id="search-input" value="How do I shoot web">
    </div>

    <!-- Email input -->
    <div class="mb-4">
      <label for="email-input" class="form-label">Email</label>
      <input class="form-control" type="email" id="email-input" value="email@example.com">
    </div>

    <!-- URL Input -->
    <div class="mb-4">
      <label for="url-input" class="form-label">URL</label>
      <input class="form-control" type="url" id="url-input" value="https://getbootstrap.com">
    </div>

    <!-- Phone Input -->
    <div class="mb-4">
      <label for="tel-input" class="form-label">Phone</label>
      <input class="form-control" type="tel" id="tel-input" value="1-(770)-334-2518">
    </div>

    <!-- Password Input -->
    <div class="mb-4">
      <label for="pass-input" class="form-label">Password</label>
      <input class="form-control" type="password" id="pass-input" value="mypasswordexample">
    </div>

    <!-- Textarea -->
    <div class="mb-4">
      <label for="textarea-input" class="form-label">Textarea</label>
      <textarea class="form-control" id="textarea-input" rows="5">Hello World!</textarea>
    </div>

    <!-- Select -->
    <div class="mb-4">
      <label for="select-input" class="form-label">Select</label>
      <select class="form-select" id="select-input">
        <option>Choose option...</option>
        <option>Option item 1</option>
        <option>Option item 2</option>
        <option>Option item 3</option>
      </select>
    </div>

    <!-- Multiselect -->
    <div class="mb-4">
      <label for="multiselect-input" class="form-label">Multiselect</label>
      <select class="form-select" id="multiselect-input" size="3" multiple>
        <option>Option item 1</option>
        <option>Option item 2</option>
        <option>Option item 3</option>
        <option>Option item 4</option>
        <option>Option item 5</option>
        <option>Option item 6</option>
      </select>
    </div>

    <!-- File input -->
    <div class="mb-4">
      <label for="file-input" class="form-label">File</label>
      <input class="form-control" type="file" id="file-input">
    </div>

    <!-- Number input -->
    <div class="mb-4">
      <label for="number-input" class="form-label">Number</label>
      <input class="form-control" type="number" id="number-input" value="37">
    </div>

    <!-- Datalist -->
    <div class="mb-4">
      <label for="datalist-input" class="form-label">Datalist</label>
      <input class="form-control" list="datalist-options" id="datalist-input" placeholder="Type to search...">
      <datalist id="datalist-options">
        <option value="San Francisco">
        <option value="New York">
        <option value="Seattle">
        <option value="Los Angeles">
        <option value="Chicago">
      </datalist>
    </div>

    <!-- Range input -->
    <div class="mb-4">
      <label for="range-input" class="form-label">Range</label>
      <input class="form-control" type="range" id="range-input">
    </div>

    <!-- Color input -->
    <div class="mb-4">
      <label for="color-input" class="form-label">Color</label>
      <input class="form-control form-control-color" type="color" id="color-input" value="#d946ef">
    </div>

## Floating labels

Your name
Your country
Your message

    <!-- Floating label: Text input -->
    <div class="form-floating mb-4">
      <input class="form-control" type="text" id="fl-text" placeholder="Your name">
      <label for="fl-text">Your name</label>
    </div>

    <!-- Floating label: Select -->
    <div class="form-floating mb-4">
      <select class="form-select" id="fl-select">
        <option selected>Argentina</option>
        <option>Belgium</option>
        <option>France</option>
        <option>Germany</option>
        <option>Japan</option>
        <option>Spain</option>
        <option>USA</option>
      </select>
      <label for="fl-select">Your country</label>
    </div>

    <!-- Floating label: Textarea -->
    <div class="form-floating">
      <textarea class="form-control" id="fl-textarea" style="height: 8rem;" placeholder="Your message"></textarea>
      <label for="fl-textarea">Your message</label>
    </div>

## Password visibility toggle

Password

    <!-- Password visibility toggle -->
    <div class="password-toggle">
      <input class="form-control" type="password" value="hidden@password">
      <label class="password-toggle-btn" aria-label="Show/hide password">
        <input class="password-toggle-check" type="checkbox">
        <span class="password-toggle-indicator"></span>
      </label>
    </div>

## Checkboxes

Check this checkbox
Uncheck this checkbox
Disabled checkbox
Check this checkbox
Uncheck this checkbox
Disabled checkbox

    <!-- Stacked checkboxes -->
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="ex-check-1">
      <label class="form-check-label" for="ex-check-1">Check this checkbox</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="ex-check-2" checked>
      <label class="form-check-label" for="ex-check-2">Uncheck this checkbox</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="ex-check-3" disabled>
      <label class="form-check-label" for="ex-check-3">Disabled checkbox</label>
    </div>

    <!-- Inline checkboxes -->
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="ex-check-4">
      <label class="form-check-label" for="ex-check-4">Check this checkbox</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="ex-check-5" checked>
      <label class="form-check-label" for="ex-check-5">Uncheck this checkbox</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="ex-check-6" disabled>
      <label class="form-check-label" for="ex-check-6">Disabled checkbox</label>
    </div>

## Radios

Toggle this radio
Toggle this radio
Disabled radio
Toggle this radio
Toggle this radio
Disabled radio

    <!-- Stacked radio buttons -->
    <div class="form-check">
      <input class="form-check-input" type="radio" id="ex-radio-1" name="radio">
      <label class="form-check-label" for="ex-radio-1">Toggle this radio</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" id="ex-radio-2" name="radio" checked>
      <label class="form-check-label" for="ex-radio-2">Toggle this radio</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" id="ex-radio-3" name="radio" disabled>
      <label class="form-check-label" for="ex-radio-3">Disabled radio</label>
    </div>

    <!-- Inline radio buttons -->
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" id="ex-radio-4" name="radio2">
      <label class="form-check-label" for="ex-radio-4">Toggle this radio</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" id="ex-radio-5" name="radio2" checked>
      <label class="form-check-label" for="ex-radio-5">Toggle this radio</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" id="ex-radio-6" name="radio2" disabled>
      <label class="form-check-label" for="ex-radio-6">Disabled radio</label>
    </div>

## Switches

Toggle this switch element
Toggle this switch element
Disabled switch element

    <!-- Switch -->
    <div class="form-check form-switch">
      <input type="checkbox" class="form-check-input" id="customSwitch1">
      <label class="form-check-label" for="customSwitch1">Toggle this switch element</label>
    </div>

    <!-- Checked switch -->
    <div class="form-check form-switch">
      <input type="checkbox" class="form-check-input" id="customSwitch2" checked>
      <label class="form-check-label" for="customSwitch2">Toggle this switch element</label>
    </div>

    <!-- Disabled switch -->
    <div class="form-check form-switch">
      <input type="checkbox" class="form-check-input" id="customSwitch3" disabled>
      <label class="form-check-label" for="customSwitch3">Disabled switch element</label>
    </div>

## Theme mode switch

Light Dark

    <!-- Theme mode switch. Can be used oly once on the page! -->
    <div class="form-check form-switch mode-switch" data-bs-toggle="mode">
      <input type="checkbox" class="form-check-input" id="theme-mode">
      <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Light</label>
      <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Dark</label>
    </div>

## Range slider (noUISlider)

###### Two handles + inputs

—

###### With value scale (pips)

—

###### One handle + no inputs

    <!-- Range slider: Two handles + inputs -->
    <div class="range-slider" data-start-min="280" data-start-max="720" data-min="0" data-max="1000" data-step="1">
      <div class="range-slider-ui"></div>
      <div class="d-flex align-items-center">
        <div class="w-50">
          <div class="input-group">
            <span class="input-group-text px-2">
              <i class="bx bx-dollar mx-1"></i>
            </span>
            <input class="form-control form-control-sm range-slider-value-min" type="number">
          </div>
        </div>
        <div class="mx-1 px-2 fs-xs">—</div>
        <div class="w-50">
          <div class="input-group">
            <span class="input-group-text px-2">
              <i class="bx bx-dollar mx-1"></i>
            </span>
            <input class="form-control form-control-sm range-slider-value-max" type="number">
          </div>
        </div>
      </div>
    </div>

    <!-- Range slider: With value scale (pips) -->
    <div class="range-slider" data-start-min="250" data-start-max="680" data-min="0" data-max="1000" data-step="1" data-pips="true">
      <div class="range-slider-ui"></div>
      <div class="d-flex align-items-center">
        <div class="w-50">
          <div class="input-group">
            <span class="input-group-text px-2">
              <i class="bx bx-dollar mx-1"></i>
            </span>
            <input class="form-control form-control-sm range-slider-value-min" type="number">
          </div>
        </div>
        <div class="mx-1 px-2 fs-xs">—</div>
        <div class="w-50">
          <div class="input-group">
            <span class="input-group-text px-2">
              <i class="bx bx-dollar mx-1"></i>
            </span>
            <input class="form-control form-control-sm range-slider-value-max" type="number">
          </div>
        </div>
      </div>
    </div>

    <!-- Range slider: One handle + no inputs -->
    <div class="range-slider" data-start-min="450" data-min="0" data-max="1000" data-step="1">
      <div class="range-slider-ui"></div>
      <input class="form-control range-slider-value-min" type="hidden">
    </div>

## Sizing

Large input
Normal input
Small input
Large select
Normal select
Small select

    <!-- Large input -->
    <div class="mb-3">
      <label class="form-label fs-base" for="input-lg">Large input</label>
      <input class="form-control form-control-lg" id="input-lg" type="text" placeholder="Large input placeholder">
    </div>

    <!-- Normal input -->
    <div class="mb-3">
      <label for="input-normal" class="form-label">Normal input</label>
      <input class="form-control" id="input-normal" type="text" placeholder="Normal input placeholder">
    </div>

    <!-- Small input -->
    <div class="mb-3">
      <label class="form-label fs-xs" for="input-sm">Small input</label>
      <input class="form-control form-control-sm" id="input-sm" type="text" placeholder="Small input placeholder">
    </div>

    <!-- Large select -->
    <div class="mb-3">
      <label class="form-label fs-base" for="select-lg">Large select</label>
      <select class="form-select form-select-lg" id="select-lg">
        <option>Large select option</option>
        <option>Option item 1</option>
        <option>Option item 2</option>
        <option>Option item 3</option>
      </select>
    </div>

    <!-- Normal select -->
    <div class="mb-3">
      <label class="form-label" for="select-normal">Normal select</label>
      <select class="form-select" id="select-normal">
        <option>Normal select option</option>
        <option>Option item 1</option>
        <option>Option item 2</option>
        <option>Option item 3</option>
      </select>
    </div>

    <!-- Small select -->
    <div class="mb-3">
      <label class="form-label fs-xs" for="select-sm">Small select</label>
      <select class="form-select form-select-sm" id="select-sm">
        <option>Small select option</option>
        <option>Option item 1</option>
        <option>Option item 2</option>
        <option>Option item 3</option>
      </select>
    </div>

## Readonly & disabled

    <!-- Readonly input -->
    <input class="form-control" type="text" placeholder="Readonly input here..." readonly>

    <!-- Disabled input -->
    <input class="form-control" type="text" placeholder="Disabled input here..." disabled>

    <!-- Disabled select -->
    <select class="form-select" disabled>
      <option>Disabled select here...</option>
      <option>Option item 1</option>
      <option>Option item 2</option>
      <option>Option item 3</option>
    </select>

## Inline form

Remember me

    <!-- Inline form -->
    <form class="row row-cols-sm-auto g-3 align-items-center">
      <div class="col-12">
        <input class="form-control" id="inline-form-input" type="text" placeholder="Username">
      </div>
      <div class="col-12">
        <select class="form-select" id="inline-form-select">
          <option selected>Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </select>
      </div>
      <div class="col-12">
        <div class="form-check">
          <input class="form-check-input" id="inline-form-check" type="checkbox">
          <label class="form-check-label" for="inline-form-check">Remember me</label>
        </div>
      </div>
      <div class="col-12">
        <button class="btn btn-primary" type="submit">Submit</button>
      </div>
    </form>

## Help text

Password
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

    <!-- Form help text -->
    <label for="help-text-input" class="form-label">Password</label>
    <input class="form-control" type="password" id="help-text-input" placeholder="Your password here">
    <div class="form-text">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</div>

## Validation: status text

First name
Looks good!
Last name
Looks good!
Username
Please choose a username.
Looks good!
City
Please provide a valid city.
Looks good!
State
Please provide a valid state.
Looks good!
Zip
Please provide a valid zip.
Looks good!
Agree to terms and conditions
You must agree before submitting.

    <!-- Forms validation: status text -->
    <form class="needs-validation" novalidate>
      <div class="row">
        <div class="col-md-4 mb-3">
          <label for="validationCustom01" class="form-label">First name</label>
          <input class="form-control" type="text" id="validationCustom01" placeholder="First name" value="John" required>
          <div class="valid-feedback">Looks good!</div>
        </div>
        <div class="col-md-4 mb-3">
          <label for="validationCustom02" class="form-label">Last name</label>
          <input class="form-control" type="text" id="validationCustom02" placeholder="Last name" value="Doe" required>
          <div class="valid-feedback">Looks good!</div>
        </div>
        <div class="col-md-4 mb-3">
          <label for="validationCustomUsername" class="form-label">Username</label>
          <input class="form-control" type="text" id="validationCustomUsername" placeholder="Username" required>
          <div class="invalid-feedback">Please choose a username.</div>
          <div class="valid-feedback">Looks good!</div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="validationCustom03" class="form-label">City</label>
          <select class="form-select" id="validationCustom03" required>
            <option value="">Choose city...</option>
            <option value="Dallas">Dallas</option>
            <option value="Houston">Houston</option>
            <option value="Los Angeles">Los Angeles</option>
            <option value="Miami">Miami</option>
            <option value="New York">New York</option>
          </select>
          <div class="invalid-feedback">Please provide a valid city.</div>
          <div class="valid-feedback">Looks good!</div>
        </div>
        <div class="col-md-3 mb-3">
          <label for="validationCustom04" class="form-label">State</label>
          <select class="form-select" id="validationCustom04" required>
            <option value="">Choose state...</option>
            <option value="Arizona">Arizona</option>
            <option value="Colorado">Colorado</option>
            <option value="Florida">Florida</option>
            <option value="Indiana">Indiana</option>
            <option value="Kentucky">Kentucky</option>
            <option value="Texas">Texas</option>
          </select>
          <div class="invalid-feedback">Please provide a valid state.</div>
          <div class="valid-feedback">Looks good!</div>
        </div>
        <div class="col-md-3 mb-3">
          <label for="validationCustom05" class="form-label">Zip</label>
          <input class="form-control" type="text" id="validationCustom05" placeholder="Zip" required>
          <div class="invalid-feedback">Please provide a valid zip.</div>
          <div class="valid-feedback">Looks good!</div>
        </div>
      </div>
      <div class="mb-3">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="invalidCheck" required>
          <label class="form-check-label" for="invalidCheck">Agree to terms and conditions</label>
          <div class="invalid-feedback">You must agree before submitting.</div>
        </div>
      </div>
      <button class="btn btn-primary" type="submit">Submit Form</button>
    </form>

## Validation: status tooltips

First name
Looks good!
Last name
Looks good!
Username
Please choose a username.
Looks good!
City
Please provide a valid city.
Looks good!
State
Please provide a valid state.
Looks good!
Zip
Please provide a valid zip.
Looks good!
Agree to terms and conditions
You must agree before submitting.

    <!-- Forms validation: status tooltips -->
    <form class="needs-validation" novalidate>
      <div class="row">
        <div class="col-md-4 mb-3">
          <label for="validationTooltip01" class="form-label">First name</label>
          <input class="form-control" type="text" id="validationTooltip01" placeholder="First name" value="John" required>
          <div class="valid-tooltip">Looks good!</div>
        </div>
        <div class="col-md-4 mb-3">
          <label for="validationTooltip02" class="form-label">Last name</label>
          <input class="form-control" type="text" id="validationTooltip02" placeholder="Last name" value="Doe" required>
          <div class="valid-tooltip">Looks good!</div>
        </div>
        <div class="col-md-4 mb-3">
          <label for="validationTooltipUsername" class="form-label">Username</label>
          <input class="form-control" type="text" id="validationTooltipUsername" placeholder="Username" required>
          <div class="invalid-tooltip">Please choose a username.</div>
          <div class="valid-tooltip">Looks good!</div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="validationTooltip03" class="form-label">City</label>
          <select class="form-select" id="validationTooltip03" required>
            <option value="">Choose city...</option>
            <option value="Dallas">Dallas</option>
            <option value="Houston">Houston</option>
            <option value="Los Angeles">Los Angeles</option>
            <option value="Miami">Miami</option>
            <option value="New York">New York</option>
          </select>
          <div class="invalid-tooltip">Please provide a valid city.</div>
          <div class="valid-tooltip">Looks good!</div>
        </div>
        <div class="col-md-3 mb-3">
          <label for="validationTooltip04" class="form-label">State</label>
          <select class="form-select" id="validationTooltip04" required>
            <option value="">Choose state...</option>
            <option value="Arizona">Arizona</option>
            <option value="Colorado">Colorado</option>
            <option value="Florida">Florida</option>
            <option value="Indiana">Indiana</option>
            <option value="Kentucky">Kentucky</option>
            <option value="Texas">Texas</option>
          </select>
          <div class="invalid-tooltip">Please provide a valid state.</div>
          <div class="valid-tooltip">Looks good!</div>
        </div>
        <div class="col-md-3 mb-3">
          <label for="validationTooltip05" class="form-label">Zip</label>
          <input class="form-control" type="text" id="validationTooltip05" placeholder="Zip" required>
          <div class="invalid-tooltip">Please provide a valid zip.</div>
          <div class="valid-tooltip">Looks good!</div>
        </div>
      </div>
      <div class="mb-3">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="invalidCheck01" required>
          <label class="form-check-label" for="invalidCheck01">Agree to terms and conditions</label>
          <div class="invalid-tooltip">You must agree before submitting.</div>
        </div>
      </div>
      <button class="btn btn-primary" type="submit">Submit Form</button>
    </form>

## Input mask (Formatted content)

Card number
Card CVC
Date
Date long
Time
Custom format

    <!-- Format: Credit card number -->
    <div class="mb-3">
      <label class="form-label" for="format-card-number">Card number</label>
      <input class="form-control" type="text" id="format-card-number" data-format="card" placeholder="0000 0000 0000 0000">
    </div>

    <!-- Format: Credit card CVC -->
    <div class="mb-3">
      <label class="form-label" for="format-card-cvc">Card CVC</label>
      <input class="form-control" type="text" id="format-card-cvc" data-format="cvc" placeholder="000">
    </div>

    <!-- Format: Date -->
    <div class="mb-3">
      <label class="form-label" for="format-date">Date</label>
      <input class="form-control" type="text" id="format-date" data-format="date" placeholder="mm/yy">
    </div>

    <!-- Format: Date long -->
    <div class="mb-3">
      <label class="form-label" for="format-date-long">Date long</label>
      <input class="form-control" type="text" id="format-date-long" data-format="date-long" placeholder="yyyy-mm-dd">
    </div>

    <!-- Format: Time -->
    <div class="mb-3">
      <label class="form-label" for="format-time">Time</label>
      <input class="form-control" type="text" id="format-time" data-format="time" placeholder="hh:mm:ss">
    </div>

    <!-- Format: Custom -->
    <div class="mb-3">
      <label class="form-label" for="format-custom">Custom format</label>
      <input class="form-control" type="text" id="format-custom" data-format="custom" data-delimiter="-" data-blocks="2 3 4" data-numeral="9" placeholder="00-000-0000">
    </div>

Top