Forms & Inputs·Available inReact Vue Angular·View as Markdown

Preview

example.tsxtsx

Loading preview…

Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.

Installation

Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.

$ pnpm add @sisyphos-ui/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Usage

Idiomatic usage in each supported framework

example.tsx

import { useState } from "react";
import { DatePicker } from "@sisyphos-ui/react";

export const Birthday = () => {
  const [date, setDate] = useState<Date | null>(null);
  return <DatePicker label="Birthday" value={date} onChange={setDate} />;
};

Range mode

Add `isRange` and a `[Date | null, Date | null]` value.

example.tsxtsx

Loading preview…

Min/max bounds

Restrict selectable dates with `minDate` / `maxDate`.

example.tsxtsx

Loading preview…

Only dates in the next 3 months are selectable.

Custom format & locale

`format` controls the display string; `locale` drives weekday and month names.

example.tsxtsx

Loading preview…

With time picker

`showTime` adds hour/minute selectors with configurable `minuteStep`.

example.tsxtsx

Loading preview…

API

Prop	Type	Default	Description
value	Date \| null \| [Date \| null, Date \| null]	—	Selected date, or `[start, end]` when `isRange` is true.
onChange	(value) => void	—	Called with the next value.
isRange	boolean	false	Switches between single-date and range modes.
label	string	—	Field label rendered above the trigger.
placeholder	string	—	Trigger placeholder. Localized default.
variant	"standard" \| "outlined"	"outlined"	Visual treatment.
size	"sm" \| "md" \| "lg"	"md"	Field height + typography scale.
minDate	Date	—	Earliest selectable date.
maxDate	Date	—	Latest selectable date.
format	string	—	Trigger format. Supports `yyyy/MM/dd/HH/mm`. Defaults to `dd.MM.yyyy` (or with time).
locale	"tr" \| "en"	"tr"	Locale for weekday and month names.
showTime	boolean	false	Adds an hour/minute picker below the calendar.
minuteStep	number	15	Minute increments inside the time picker.
defaultHour	number	0	Hour applied on the first date pick when no time is set yet.
defaultMinute	number	0	Minute applied alongside `defaultHour`.
defaultStartHour	number	—	Range mode: default hour for the start date. Falls back to `defaultHour`.
defaultStartMinute	number	—	Range mode: default minute for the start date. Falls back to `defaultMinute`.
defaultEndHour	number	—	Range mode: default hour for the end date. Falls back to `defaultHour`.
defaultEndMinute	number	—	Range mode: default minute for the end date. Falls back to `defaultMinute`.
allowClear	boolean	false	Show a clear button on the trigger when a value is present.
fullWidth	boolean	false	Stretch the trigger to its container.
calendarIcon	ReactNode	—	Override the default calendar icon.
placement	Placement	"bottom-start"	Initial popover placement (auto-flips when needed).
error	boolean	false	Marks the field as invalid for styling and ARIA.
errorMessage	string	—	Message shown below the field when `error` is true.

The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.

Accessibility

Trigger input wires aria-haspopup="dialog", aria-expanded, and a unique id/aria-controls link to the popover.
The popover uses role="dialog" and is portal-mounted with auto-flip placement.
aria-invalid mirrors error; the error message uses role="alert".
Calendar navigation buttons carry descriptive aria-labels.

Keyboard interactions

Key	Action
`Tab`	Moves focus through the trigger and the in-popover controls.
`ArrowUp`then`ArrowDown`	Steps through months in the months view, decades in the years view.
`Esc`	Closes the popover.

Need more?View on npm →