Date Picker

‮A styled native date input that keeps the browser's picker and validation.‬

‮Browsers‬: Chrome 123+Firefox 121+Safari 17.5+
‮Tier‬: 0
‮Forced layout budget‬: 0 ms
‮Axe budget‬: 0
‮SSR compatible‬: ‮Yes‬
‮Published contract‬: ‮Test harness‬

‮Playground‬

Date Picker

Default

Start date

React

CSS

Tailwind

import { DatePicker } from "@gunkin/uiify";

export default function Example() {
  return (
    <div>
      <label htmlFor="start-date">Start date</label>
      <DatePicker className="" id="start-date" name="startDate" defaultValue="2026-10-19" />
    </div>
  );
}

@layer components {
  [data-uiify-date-picker] {
    display: block;
    inline-size: 100%;
    min-inline-size: 12rem;
    max-inline-size: 24rem;
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
    border: var(--border-width) solid var(--input);
    border-radius: var(--radius-md);
    corner-shape: squircle;
    background-color: var(--card);
    color: var(--foreground);
    font: inherit;
    font-size: var(--uiify-control-text);
    line-height: var(--leading-normal);
    transition: var(--transition-colors);
  }

  [data-uiify-date-picker]:focus-visible {
    border-color: var(--primary);
    outline: var(--ring-width) solid var(--ring);
    outline-offset: 2px;
  }

  [data-uiify-date-picker][data-invalid],
  [data-uiify-date-picker]:user-invalid {
    border-color: var(--destructive);
  }

  [data-uiify-date-picker][data-invalid]:focus-visible {
    outline-color: var(--destructive);
  }

  [data-uiify-date-picker]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

import { DatePicker } from "@gunkin/uiify";

export default function Example() {
  return (
    <div>
      <label htmlFor="start-date">Start date</label>
      <DatePicker
        className="
          [&[data-positioning=native]]:[--uiify-anchor-offset:var(--space-sm)]
          [&_[data-positioning=native]]:[--uiify-anchor-offset:var(--space-sm)]
          [&[popover]:popover-open:not([data-positioning=native])]:[margin:revert]
          [&_[popover]:popover-open:not([data-positioning=native])]:[margin:revert] block w-full min-w-48 max-w-96 py-sm
          px-md border-[length:var(--border-width)] border-solid border-input rounded-md [corner-shape:squircle] bg-card
          text-foreground [font-family:inherit] [font-size:var(--uiify-control-text)]
          [line-height:var(--leading-normal)] [transition:var(--transition-colors)] focus-visible:border-primary
          focus-visible:outline-[length:var(--ring-width)] focus-visible:outline-ring focus-visible:outline-offset-2
          data-[invalid]:border-destructive user-invalid:border-destructive
          data-[invalid]:focus-visible:outline-destructive disabled:opacity-50 disabled:cursor-not-allowed
        "
        id="start-date"
        name="startDate"
        defaultValue="2026-10-19"
      />
    </div>
  );
}

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('[&[data-positioning=native]]:[--uiify-anchor-offset:var(--space-sm)] [&_[data-positioning=native]]:[--uiify-anchor-offset:var(--space-sm)] [&[popover]:popover-open:not([data-positioning=native])]:[margin:revert] [&_[popover]:popover-open:not([data-positioning=native])]:[margin:revert] block w-full min-w-48 max-w-96 py-sm px-md border-[length:var(--border-width)] border-solid border-input rounded-md [corner-shape:squircle] bg-card text-foreground [font-family:inherit] [font-size:var(--uiify-control-text)] [line-height:var(--leading-normal)] [transition:var(--transition-colors)] focus-visible:border-primary focus-visible:outline-[length:var(--ring-width)] focus-visible:outline-ring focus-visible:outline-offset-2 data-[invalid]:border-destructive user-invalid:border-destructive data-[invalid]:focus-visible:outline-destructive disabled:opacity-50 disabled:cursor-not-allowed');

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@layer components {
  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}

‮Examples‬

Native date input

The browser owns date entry, constraints, locale and picker UI; provide a visible label.

Date Picker

Default

Start date

import { DatePicker } from "@gunkin/uiify";

export default function Example() {
  return (
    <div>
      <label htmlFor="start-date">Start date</label>
      <DatePicker id="start-date" name="startDate" defaultValue="2026-10-19" />
    </div>
  );
}

‮API‬

`DatePicker`

‮Prop‬	‮Type‬	‮Default‬	‮Description‬
`type`	`fixed to "date"`	—	‮Fixed native input type; the browser supplies the date picker.‬
`invalid`	`boolean`	`false`	‮Sets aria-invalid and data-invalid when true.‬
`id / name / value / defaultValue / min / max / required / disabled`	`native input props`	—	‮Native date input props and form behavior are preserved.‬
`className / style / ref / events`	`native input props`	—	‮Native input props, styles, events, and ref are forwarded.‬

‮Keyboard‬

‮Key‬	‮Action‬

‮Accessibility‬

‮Direct native input type=date wrapper. Provide a visible label and use native required, min, and max constraints. The browser owns date entry, locale, keyboard behavior, and picker UI; UIify does not format values, convert time zones, or provide a calendar grid. invalid sets aria-invalid and data-invalid.‬

‮Styling hooks‬

data-uiify-date-pickerdata-invalid

‮Framework‬

‮Style‬

‮Theme‬

‮Language‬

Date Picker

‮Playground‬

Date Picker

Default

‮Examples‬

Native date input

Date Picker

Default

‮API‬

`DatePicker`

‮Keyboard‬

‮Accessibility‬

‮Styling hooks‬