Settings row for a date, a time, or both: the row reads the value the way anyone would write it down and opens a real month calendar, while a time on its own keeps the platform's own field inline, since a time has no month to show.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-dateNew here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { InspectorDate } from "@/components/beste/component/inspector-date";
// Uncontrolled. The value is the format the platform uses, which is also what a
// form submits and what new Date() parses.
<InspectorDate label="Publish on" defaultValue="2026-08-01" />
// Controlled
<InspectorDate label="Publish on" value={date} onValueChange={setDate} />
// A time, or both at once
<InspectorDate label="Opens at" mode="time" value={time} onValueChange={setTime} />
<InspectorDate label="Starts" mode="datetime" value={start} onValueChange={setStart} />
<InspectorDate
label="Deadline"
icon={CalendarClockIcon} // optional leading icon; the mode brings its own
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
mode="datetime"
min="2026-01-01T00:00" // in the same format as the value
max="2026-12-31T23:59"
step={900} // granularity in seconds
name="deadline" // takes part in a form
required
value={deadline}
onValueChange={setDeadline}
/>
// The row's reading is deterministic on purpose, so the server and the browser
// agree on it. Bring your own locale where it can only run in one place:
<InspectorDate
label="Publish on"
value={date}
onValueChange={setDate}
formatValue={(iso) => new Date(iso).toLocaleDateString("tr-TR", { dateStyle: "long" })}
/>
// A clear button inside the panel, and a week that starts on Monday
<InspectorDate label="Publish on" clearable weekStartsOn={1} value={date} onValueChange={setDate} />
// The value is what a form submits, what `new Date()` parses, and what comes back
// out, and the calendar never turns it into anything else. Parsing is deliberately not
// `new Date("2026-08-01")`: a bare date string is read as UTC midnight, which is the
// evening before anywhere west of Greenwich.Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorDate } from "@/components/beste/component/inspector-date";
<InspectorDate
label="Publish on"
className="w-72"
defaultValue="2026-08-01"
clearable
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Label rendered on the left, inside the row. |
icon | LucideIcon | — | Optional leading icon shown before the label. Defaults to the mode's own. |
value | string | — | Controlled value, in the format the platform uses: `2026-07-25` for a date, `14:30` for a time, `2026-07-25T14:30` for both. That is also what a form submits and what `new Date()` parses, so nothing has to be converted twice. |
defaultValue | string | — | Initial value in uncontrolled mode. |
onValueChange | (value: string) => void | — | Fires whenever a day is picked, a time typed, or the value cleared. |
onOpenChange | (open: boolean) => void | — | Fires when the calendar opens or closes. |
mode | "date" | "time" | "datetime" | "date" | What is being picked. |
min | string | — | Earliest allowed value, in the same format. |
max | string | — | Latest allowed value, in the same format. |
step | number | — | Granularity in seconds, for the time half. |
formatValue | (value: string) => string | — | How the value reads on the row. Use it to bring your own locale, which is the one thing this cannot do for you without guessing where it is running. |
emptyLabel | string | — | What the row reads while there is no value. |
clearable | boolean | — | Offer a button that clears the value. |
weekStartsOn | 0 | 1 | 2 | 3 | 4 | 5 | 6 | — | Which day starts the week: 0 is Sunday, 1 is Monday. |
disabled | boolean | — | Block interaction and dim the row. |
readOnly | boolean | — | Show the value but refuse edits. |
tone | "muted" | "outline" | "ghost" | "muted" | Surface treatment: filled (default), hairline outline, or bare until hover. |
size | "sm" | "default" | "lg" | "default" | Row height preset. |
name | string | — | Name of the field, so the row can take part in a form. |
id | string | — | Id of the field. One is generated when it is left out. |
className | string | — | |
aria-label | string | — | Accessible name. Falls back to `label`. |
Settings row for a ratio: the row prints it and draws it, and opens an editor with the ratios worth a name plus both sides always editable. It is kept as two numbers rather than as their quotient, since 16:9 is what a reader recognises.
Settings row with a label on the left and a plain text field on the right, sharing the family's pill: the whole row is the label, so pressing anywhere puts the caret in the field.
Settings row for a span rather than a value: two thumbs on the row itself, the band between them filling it, and both ends of the pair read out on the right. Ticks, tones and thumb states follow inspector-slider exactly, appearing on hover.
Settings row for a border: the row draws one exactly as described beside a summary of it, and opens an editor with the sides as icon toggles and the width, style and colour under them, each one a row of the family.