Inputs

Natural Language Date Field

A text field that reads phrases like 'in 2 days' or 'next friday' as a real date, with a calendar popover and a live preview sentence below.

Schedule Date

Your post will be published on Wednesday, September 9

Using Natural Language Date Field

A text field that reads phrases like 'in 2 days' or 'next friday' as a real date, with a calendar popover and a live preview sentence below.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: accent, label, phrase, previewPrefix

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2305Birthdate popover pickerInputsA labeled button that opens a floating calendar with month and year dropdowns for quickly reaching a birth year, closing itself the moment a day is picked.

2332Date and Time Duo PickerInputsTwo side by side labeled fields, a compact date button that opens a calendar popover and a plain time field, for setting a date and a time as two independent steps.

2443Stay range popover pickerInputsA trigger button that shows two dates joined by a hyphen and opens a floating range calendar for picking a start and end day, for a hotel-style stay selection.

2108Appointment Range CardInputsA card that pairs a single-month date grid with a start-time and end-time field below it, for picking one day plus a time window in one compact block.

2109Appointment Scheduler CardInputsA single date picker framed inside a titled card with a jump to today button in the corner, styled for booking one appointment.

2792Auto Grow TextareaInputsA multi-line text field that grows taller as the person types more, instead of scrolling inside a fixed box.