Inputs — Date range with a shared note

A bordered date-range fieldset contains labelled Start and End inputs with a shared timezone note. Use for a bounded reporting or booking period.

ReactHTML

1440 × 480

Open in new tab

Component.tsx10 lines

export default function InputsDateRange() {
  return (
    <fieldset className="w-72 rounded-lg border border-neutral-200 bg-white p-4 text-neutral-900 sm:w-[28rem]"><legend className="px-1 text-sm font-semibold">Date range</legend>
    <div className="grid gap-3 sm:grid-cols-2"><div><label className="mb-1.5 block text-sm font-medium" htmlFor="inputs-date-range-start">Start date</label>
    <div className="flex rounded-md focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-neutral-900"><input className="h-10 w-full min-w-0 rounded-md border border-neutral-300 bg-white px-3 text-sm text-neutral-900 placeholder:text-neutral-500 focus-visible:outline-hidden" id="inputs-date-range-start" name="start" type="date" defaultValue="2026-10-11" aria-describedby="inputs-date-range-hint" /></div></div>
    <div><label className="mb-1.5 block text-sm font-medium" htmlFor="inputs-date-range-end">End date</label>
    <div className="flex rounded-md focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-neutral-900"><input className="h-10 w-full min-w-0 rounded-md border border-neutral-300 bg-white px-3 text-sm text-neutral-900 placeholder:text-neutral-500 focus-visible:outline-hidden" id="inputs-date-range-end" name="end" type="date" defaultValue="2026-10-18" aria-describedby="inputs-date-range-hint" /></div></div></div>
    <p className="mt-3 text-xs text-neutral-500" id="inputs-date-range-hint">Dates follow your local timezone.</p></fieldset>
  )
}

Pattern notes

When to use: Use for a start and end date that should be understood together. Choose separate fields when each date has independent guidance. Variations: clear the initial dates, add minimum dates, or replace the note with a short inclusive-range explanation.
Hierarchy: Read Date range, Start date, End date and the timezone note. Native date fields provide their browser calendar interface. Labels use 2 words and the shared hint under 8 words; both fields reference it with aria-describedby.
Responsive: Below 640px the date inputs stack inside the 288px fieldset. From 640px the fieldset is 448px wide and the inputs occupy two equal columns. Native date controls retain min-w-0 to fit their column.
Layout: A 288px bordered fieldset grows to 448px at sm with 16px padding and a 14px legend. Two labelled 40px date fields use a 12px grid gap. Each label sits 6px above its field, and a shared 12px note follows by 12px.
States: Each date field wrapper shows a 2px offset outline whenever focus is inside the native date segments or calendar control. Dates are initially one week apart. Native calendar interaction remains available; range validation and any disabled dates belong to the surrounding form.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ Date range                                           │
│ Start date                     End date              │
│ [2026-10-11]                   [2026-10-18]          │
│ Dates follow your local timezone.                    │
└──────────────────────────────────────────────────────┘

View all

Inputs — Dimensions with proportions and units
Layout tags: split,form,numbers,compact
Inputs — Field grid with mixed widths
Layout tags: grid,form,compact
Inputs — Label, hint and error states
Layout tags: stacked,form,compact

Inputs — Date range with a shared note

Pattern notes

More in Inputs

Inputs — Dimensions with proportions and units

Inputs — Field grid with mixed widths

Inputs — Label, hint and error states