Date Field

Typed date entry in locale-ordered segments. Powers Date Picker's editable trigger; use it alone when no calendar is wanted.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { useState } from "react";
import { DateField } from "@aile.sh/elia";

export function Example() {
  const [born, setBorn] = useState("1994-03-17");

  return (
    <div className="flex flex-col gap-3">
      <DateField value={born} onChange={setBorn} max="2026-12-31" />
      <p className="font-mono text-[11px] text-ink-3">
        value: {born || "incomplete"}
      </p>
    </div>
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia