CSS variables

Every form control reads its size, colors and states from CSS variables, so you can restyle inputs, selects, checks and switches at runtime without recompiling Sass.

Overview

Form controls are built on three layers of custom properties. Each layer reads the one above it, so you can change a single value or a single control.

1. The control scale on :root. --tblr-btn-input-* holds the padding, font size, line height, radius and minimum height of a control, with a -sm-*, -lg-* and -xl-* set for each size. --tblr-control-checked-bg and its siblings hold the state colors that checks, radios and switches share.
2. Component tokens on the control. .form-control and .form-select carry --tblr-control-*, .input-group carries --tblr-input-group-addon-*, .form-floating carries --tblr-form-floating-*, and so on. By default each token points at the scale.
3. The declarations. Every padding, color or border in the stylesheet reads a token, never a fixed value.

The names follow Bootstrap 6, so a project that moves to a future major keeps its overrides.

Sass still works. A $input-*, $form-select-* or $form-check-* variable that you set in Sass is compiled into the token as a fixed value. That control then ignores the scale on :root, as it did before the tokens existed.

Usage

Change every control at once

Override the scale on :root. Inputs, selects, add-ons, floating labels, select-group tiles and column labels all follow.

:root {
  --tblr-btn-input-padding-y: 0.75rem;
  --tblr-btn-input-padding-x: 1.25rem;
  --tblr-btn-input-border-radius: 0;
}

The scale inherits, so the same variables on a container change only the controls inside it.

<div style="--tblr-btn-input-padding-y: 0.75rem; --tblr-btn-input-border-radius: 0">
  <div class="mb-3">
    <label class="form-label">Taller, square controls</label>
    <input type="text" class="form-control" placeholder="Input" />
  </div>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Username" />
  </div>
</div>

Change one control

Set a component token on the element. Tokens on the element win over the scale.

<input type="text" class="form-control mb-3" placeholder="Pill input" style="--tblr-control-border-radius: 2rem; --tblr-control-padding-x: 1.5rem" />
<select class="form-select" style="--tblr-control-bg: var(--tblr-bg-surface-secondary); --tblr-control-border-color: transparent">
  <option>Flat select</option>
</select>

Make a custom size

The size classes only move the size tokens, so a custom size is a few tokens on a class of your own.

.form-control-xs {
  --tblr-control-padding-y: 0.125rem;
  --tblr-control-padding-x: 0.5rem;
  --tblr-control-font-size: 0.75rem;
  --tblr-control-line-height: 1rem;
}

The minimum height, the file selector button and the color swatch follow the tokens on their own.

Recolor checks, radios and switches

The checked and disabled colors of every check control come from :root.

<div style="--tblr-control-checked-bg: var(--tblr-green)">
  <label class="form-check">
    <input class="form-check-input" type="checkbox" checked />
    <span class="form-check-label">Checkbox</span>
  </label>
  <label class="form-check">
    <input class="form-check-input" type="radio" checked />
    <span class="form-check-label">Radio</span>
  </label>
  <label class="form-check form-switch">
    <input class="form-check-input" type="checkbox" checked />
    <span class="form-check-label">Switch</span>
  </label>
</div>

Reference

Control scale on :root

The same set exists per size as --tblr-btn-input-sm-*, --tblr-btn-input-lg-* and --tblr-btn-input-xl-*.

State colors on :root

Inputs and selects

Set on .form-control, .form-control-plaintext and .form-select. .form-control-sm/-lg and .form-select-sm/-lg override the first five with the matching size of the scale.

.form-select adds the arrow: --tblr-control-select-bg, --tblr-control-select-bg-dark, --tblr-control-select-bg-position, --tblr-control-select-bg-size and --tblr-control-select-indicator-padding (the room kept for the arrow, 3 × the scale's horizontal padding).

Tom Select copies the .form-control or .form-select class onto its wrapper, so its control reads the same tokens.

Input groups

Set on .input-group. .input-group-sm/-lg override the size tokens and pass them to the controls in the group.

Floating labels

Set on .form-floating.

Range inputs

Set on .form-range.

Checks and radios

.form-check carries the layout: --tblr-form-check-min-height (1.25rem), --tblr-form-check-padding-start (2rem) and --tblr-form-check-margin-bottom (0.75rem). The input itself carries the look.

Switches

Set on .form-switch. The knob fills the height minus a 0.125rem gap on every side and slides by the width, so both follow these two tokens.

.form-switch-lg keeps its own --tblr-form-switch-lg-* set.

Sass variables

The tokens are seeded from the Sass variables of the same component: $input-* for inputs, $form-select-* for selects, $input-group-addon-*, $form-floating-*, $form-range-*, $form-check-* and $form-switch-*. Configure them through @use as before. A configured variable becomes a fixed token value, so it no longer follows --tblr-btn-input-* at runtime; leave it at its default to keep the runtime link.

@use '@tabler/core/scss/tabler' with (
  $input-padding-y: 0.75rem,
  $input-border-radius: 0
);

Related