Skip to content

Forms

Date Range Field

Two native date inputs with linked bounds that preserve an ordered start and end date.

SubscriptionIncluded with the Velocity Components subscription.
$velocityx add standard-date-range-field
Props & docs

Needs a licence key — subscribe here, then velocityx loginonce.

AstroReactTailwind CSSNew

Date Range Field

Date Range Field

Live preview of the Date Range Field component

Booking dates

The end date cannot be earlier than the start date.

The code ships with Velocity.

Every component's full source — copy-paste ready, yours to edit — comes with any Velocity package. Buy once, own the code forever.

Get Velocity X — from $1,250 See all packages →

Using the Date Range Field component

Every Velocity component is plain Astro or React markup styled with Tailwind utility classes. There is no proprietary runtime and no design-system wrapper to adopt — the component inherits whatever colour and type tokens your project already defines.

Read the component docs All 589 components

More Forms components

Browse all →

Toggle Switch Row

Stacked list of labeled on/off switches for notification preferences, built on native checkboxes with zero JS.

Rating Input

Accessible star-rating field built on labeled native radio inputs with hover preview.

Range / Budget Slider Field

Single budget or quantity slider with a live value readout driven by a small scoped inline script.

OTP / Code Input

Segmented one-time-code field with auto-advance, backspace-to-previous, and full-code paste support.

Inline Validation States Showcase

Reference demo of idle/valid/invalid inline field validation with live icons and messaging on blur.

Textarea with Character Counter

Textarea with a live N/max counter that shifts to warning and error colour near the limit.