Web Components

Installation

npm install @litopis/elements @litopis/dom

import "@litopis/elements";
import "@litopis/dom/styles/base.css";

Example

HTML attributes

Component options use kebab-case attribute names.

<litopis-date-picker
  mode="popover"
  first-day-of-week="1"
  close-on-select="false"
  clear-button
  format="dd.mm.yyyy"
  label="Start date"
  today-button
></litopis-date-picker>

Range

Use one name. Split fields submit it as name[start] and name[end].

<litopis-date-picker
  selection="range"
  layout="split"
  name="stay"
  start="2026-06-12"
  end="2026-06-18"
></litopis-date-picker>

Custom input

Use the input slot to keep your own input element. Litopis supplies its value, behavior and accessibility attributes.

<litopis-date-picker mode="popover" label="Start date">
  <input slot="input" class="my-input" placeholder="Choose a date" />
</litopis-date-picker>

Value property

Read or set value as an ISO date string in YYYY-MM-DD format.

import type { LitopisDatePickerElement } from "@litopis/elements";

const picker = document.querySelector<LitopisDatePickerElement>(
  "litopis-date-picker",
);

if (picker) {
  picker.value = "2026-07-19";
  console.log(picker.value);
}

CDN

Use the browser bundle without a build step. Replace VERSION with an exact version.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@litopis/dom@VERSION/styles/base.css" />
<script src="https://cdn.jsdelivr.net/npm/@litopis/elements@VERSION/dist/index.global.js"></script>

Styling

Import a Litopis stylesheet, then override its CSS variables or selectors as needed.