# Date Range Field > A start and an end date, each on the native date input, linked so the end is never before the start. `` · Form · built on `` ## Install ```sh pnpm add slab-elements lit ``` ## Usage ### React `MyDateRangeField.jsx`. React 19 or later, which sets props on custom elements as properties. ```jsx import 'slab-elements/date-range-field.js'; export function MyDateRangeField() { return ( ); } ``` ### Lit `my-date-range-field.ts`. Slab is built on Lit, so its elements are at home in Lit's templates. ```ts import 'slab-elements/date-range-field.js'; import { html, LitElement } from 'lit'; import { customElement } from 'lit/decorators.js'; @customElement('my-date-range-field') export class MyDateRangeField extends LitElement { render() { return html` `; } } ``` ### Vue `MyDateRangeField.vue`. Let Vue's compiler know slab- tags are custom elements with isCustomElement. ```vue ``` ### Svelte `MyDateRangeField.svelte`. Svelte binds properties and events to custom elements like any other element. ```svelte ``` ### HTML `index.html`. Any bundler (or an import map) takes care of the imports. ```html ``` ## Example Here's a styled version, ``. It's not in the package — it's an example of what you can build with the headless element. Copy it and make it yours at the bottom of this page. ```html The crew needs at least one dry day in the window. ``` Swap `slab-styled-` for `slab-` in that markup and you've got the same example as it ships: the headless elements with no CSS at all. That's your starting point. Each input's bound is the other's value, as well as `min` and `max`, so a browser's picker won't offer an end before the start. An end typed before the start isn't changed to fit: it stays, and the field is `rangeUnderflow` and `rangeOverflow`, as a date outside `min` and `max` is on a single input. The form gets two entries under `name`, the start and then the end, even when one is empty. The group is named by `label`, and each input by it and then its own label, "Start" and "End" unless you set `start-label` and `end-label`, so a screenreader reads "Stay Check-in". Lay the inputs out with `::part(fields)`. For a calendar instead of the browser's picker, [Calendar](calendar.md) with `range` picks the same thing, as "yyyy-mm-dd/yyyy-mm-dd". ## Keyboard | Key | What it does | | -------------- | -------------------------------------------------------------------------------------------------- | | Tab, Shift+Tab | Moves from the start to the end, and out of the field. Firefox stops at each part of a date first. | | Enter | Submits the form. | | Anything else | What it does on a native date input, where the browser edits the date. | ## Behavior A date range field with no visual styles: two native ``s, a start and an end, for picking the first and last days of a range, such as a stay or a reporting period. Each is typed into, picked from, and read the way one is, with the browser's own picker. A calendar of Slab's making is `slab-calendar`'s job, and its `range` picks the same thing. The values are the inputs': ISO "yyyy-mm-dd" strings, or empty ones, as on a Date Field. What a person sees is formatted for their locale by the browser, but what's submitted and read is always that one format. The two are linked rather than kept apart: the start's latest date is the end, and the end's earliest is the start, as well as `max` and `min`. So a browser's picker won't offer an end before the start, and an end typed before it is `rangeUnderflow` on the end and `rangeOverflow` on the start, just as a single input reports a date outside `min` and `max`. Neither value is changed to fit the other: what's typed stays, and it's invalid. The group is named by `label`, and each input by it and its own label, so a screenreader reads "Stay Start" and "Stay End". The host delegates focus, so clicking anywhere on it, or a `