A duration input that fits your Bootstrap theme

The component keeps its Shadow DOM. Bootstrap’s global selectors do not reach inside it; this page maps Bootstrap theme variables to the component’s public styling hooks instead.

Maintenance window

Set a duration of more than a day, down to milliseconds.

Duration

Current value: 30:00:00.042

How the styling works

CSS custom properties bring in Bootstrap colors, border radius, spacing, and focus-ring styling. Shadow Parts provide targeted access to the control and its internal fields.

input-duration {
  --input-duration-border-color: var(--bs-border-color);
  --input-duration-border-radius: var(--bs-border-radius);
  --input-duration-focus-color: var(--bs-primary);
  --input-duration-focus-outline: 0.25rem solid rgba(var(--bs-primary-rgb), 0.25);
}

input-duration::part(field) {
  font-size: 1rem;
}