Skip to documentation
BoobstrapDocs
Forms

File, range, and color controls

Use styled native file uploads, range sliders, and color pickers with labels, states, sizes, and accessible values.

Forms

File, range, and color controls

These controls retain native browser behavior. Pair each one with a persistent label and explain constraints before submission.

File upload

PDF or Word document, up to 10 MB.
HTML · File upload
<label class="bs-label" for="brief">Project brief</label>
<input class="bs-file" id="brief" type="file" accept=".pdf,.doc,.docx" aria-describedby="brief-help">
<span class="bs-form-text" id="brief-help">PDF or Word, up to 10 MB.</span>

Range slider

65%
HTML · Range slider
<div class="bs-flex bs-items-center bs-justify-between bs-gap-3">
    <label class="bs-label" for="volume">Notification volume</label>
    <output class="bs-badge bs-badge-primary" id="volume-value" for="volume">65%</output>
  </div>
  <input class="bs-range" id="volume" type="range" min="0" max="100" value="65" aria-describedby="volume-value" data-native-output="volume-value">

Color picker

#D9468F
HTML · Color picker
<label class="bs-label" for="accent">Accent color</label>
  <div class="bs-flex bs-items-center bs-gap-3">
    <input class="bs-color" id="accent" type="color" value="#d9468f" aria-describedby="accent-value" data-native-output="accent-value">
    <output class="bs-badge" id="accent-value" for="accent">#D9468F</output>
  </div>
JavaScript · Synchronize native values
document.querySelectorAll("[data-native-output]").forEach((input) => {
  const output = document.querySelector(`#${input.dataset.nativeOutput}`);
  const render = () => {
    output.value = input.type === "range" ? `${input.value}%` : input.value.toUpperCase();
  };
  input.addEventListener("input", render);
  render();
});

Validate files on the server

accept guides selection but is not a security boundary.

Expose the current value

When a range or color value matters precisely, update a connected output as the user changes it.

Keep native behavior

Do not replace these inputs with div-based controls unless the product requirement justifies recreating all keyboard and form behavior.

Control API

.bs-file, .bs-file-sm, .bs-file-lg, .bs-range, and .bs-color style the native controls. A parent .bs-control-sm or .bs-control-lg can size file input groups consistently.