Silicon
Forms
Form control styles, layout options, and custom components.
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 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
<!-- 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 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
<!-- 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
<!-- 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
<!-- 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
<!-- 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 -->
<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
<!-- 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
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
<!-- 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
<!-- 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)
- Amex: starts with 34/37
- VISA: starts with 4
- Diners Club: starts with 300-305/309
- MasterCard: starts with 51-55/22-27
- JCB: starts with 35/2131/1800
- Discover: starts with 6011/65/644-649
<!-- Format: Credit card number -->
<div class="mb-3">
<label for="cardFormat" class="form-label">Card number</label>
<div class="d-flex align-items-center border rounded-3">
<input type="text" class="form-control border-0 bg-transparent shadow-none" id="cardFormat" data-format='{"creditCard": true}' placeholder="Enter credit card number">
<div class="p-3">
<div class="credit-card-icon"></div>
</div>
</div>
</div>
<!-- Format: Phone -->
<div class="mb-3">
<label for="phoneFormat" class="form-label">Phone</label>
<input type="tel" class="form-control" id="phoneFormat" data-format='{"numericOnly": true, "delimiters": ["+1 ", " ", " "], "blocks": [0, 3, 3, 2]}' placeholder="+1 ___ ___ __">
</div>
<!-- Format: Date long -->
<div class="mb-3">
<label for="dateFormat" class="form-label">Date</label>
<input type="text" class="form-control" id="dateFormat" data-format='{"date": true, "delimiter": "-", "datePattern": ["Y", "m", "d"]}' placeholder="yyyy-mm-dd">
</div>
<!-- Format: Date short -->
<div class="mb-3">
<label for="dateShortFormat" class="form-label">Date short</label>
<input type="text" class="form-control" id="dateShortFormat" data-format='{"date": true, "datePattern": ["m", "y"]}' placeholder="mm/yy">
</div>
<!-- Format: Time -->
<div class="mb-3">
<label for="timeFormat" class="form-label">Time</label>
<input type="text" class="form-control" id="timeFormat" data-format='{"time": true, "timePattern": ["h", "m"]}' placeholder="hh:mm">
</div>
<!-- Format: Custom blocks -->
<div class="mb-3">
<label for="customFormat" class="form-label">Custom blocks</label>
<input type="text" class="form-control" id="customFormat" data-format='{"blocks": [4, 3, 3, 4, 2], "delimiters": [".", " ", "/", "-"]}' placeholder="blocks:[4, 3, 3, 4, 2], delimiters: ['.', ' ', '/', '-']">
</div>
<!-- Format: Prefix + uppercase -->
<div class="mb-3">
<label for="prefixFormat" class="form-label">Prefix + uppercase</label>
<input type="text" class="form-control" id="prefixFormat" data-format='{"prefix": "PREFIX", "delimiter": "-", "blocks": [6, 4, 5, 3], "uppercase": true}'>
</div>