Date-field
Styled native date input: <input type="date" class="form-control date-field">. The native calendar picker IS the behavior layer (keyboard entry, locale formats, AT support) — the class only normalizes the WebKit picker-indicator (opacity, hover wash) and the intrinsic edit-field padding so the control lines up with text inputs. No custom calendar.
Root: input.date-field on <input>
Example
<input class="form-control date-field" type="date" id="due" value="2026-08-14">Contract
Variants & modifiers
| Class | Axis | Rules |
|---|---|---|
form-control | base-skin | one required · exclusive |
is-invalid | modifier | optional |
form-control-compact | modifier | optional |
Accessibility
| On | Attribute | Level | When |
|---|---|---|---|
input.date-field | aria-label | recommended | Whenever there is no visible <label> associated via for/id (e.g. the fields inside a .date-range). |
Associate a label via for/id, or aria-label when the field sits in a composite like .date-range. Native date inputs announce and constrain values themselves; use min/max/required attributes rather than scripted validation where possible. Pair .is-invalid with aria-invalid="true" and aria-describedby.
Nesting
Allowed in:
.form-group.date-rangetoolbars
Subcomponents
Date-range
Row layout for a start/end pair: two .date-field inputs flexing equally around an en-dash separator. Constrain the pair with min/max attributes (set min on the end field to the start value in your app) — the layout itself imposes no logic.
Root: .date-range on <div>
Example
<div class="date-range" role="group" aria-label="Sprint window"><input class="form-control date-field" type="date" value="2026-08-03" aria-label="Start date"><span class="date-range-separator" aria-hidden="true">–</span><input class="form-control date-field" type="date" value="2026-08-17" aria-label="End date"></div>Structure
| Selector | Required | Description |
|---|---|---|
.date-field | required | Two <input class="form-control date-field" type="date"> DIRECT children (start, then end), each with its own accessible name (aria-label="Start date" / "End date"). |
.date-range-separator | optional | The "–" between the fields; decorative, so it must carry aria-hidden="true". |
Accessibility
| On | Attribute | Level | When |
|---|---|---|---|
.date-range-separator | aria-hidden | required | |
.date-range | role | recommended | Recommended: role="group" with aria-labelledby pointing at the visible caption, so AT announces the pair as one field ("Sprint window"). |
Give the row role="group" + aria-labelledby (or aria-label) naming the range, and each input its own aria-label (Start date / End date). The separator is visual only — keep aria-hidden="true" on it.
Nesting
Allowed in:
.form-groupfilter rowstoolbars
Never inside (or containing):
.date-range