Schedule Chip

Use Schedule Chip when a date and time should remain readable until someone chooses to edit it. The compact summary expands into one connected editor with presets, precise fields, validation, and async persistence.

Preview

Reduce motion:Off

Inspect

Installation

Motion Lucide

npx shadcn@latest add @sona-ui/schedule-chip

Usage


"use client";
 
import { useState } from "react";
 
import ScheduleChip, {
  type ScheduleValue,
} from "@/components/ui/schedule-chip/schedule-chip";
 
const initialSchedule: ScheduleValue = {
  date: "2026-09-09",
  time: "09:00",
  timezone: "Asia/Colombo",
};
 
const presets = [
  {
    label: "Tomorrow morning",
    value: initialSchedule,
  },
  {
    label: "Friday afternoon",
    value: {
      date: "2026-09-11",
      time: "15:00",
      timezone: "Asia/Colombo",
    },
  },
];
 
function formatSchedule(value: ScheduleValue | null) {
  if (!value) return "Add schedule";
  if (value.date === "2026-09-09" && value.time === "09:00") {
    return "Tomorrow, 9 AM";
  }
  if (value.date === "2026-09-11" && value.time === "15:00") {
    return "Friday, 3 PM";
  }
  return `${value.date}, ${value.time}`;
}
 
export default function ScheduleChipDemo() {
  const [schedule, setSchedule] = useState<ScheduleValue | null>(
    initialSchedule,
  );
 
  return (
    <ScheduleChip
      value={schedule}
      onValueChange={setSchedule}
      formatSummary={formatSchedule}
      presets={presets}
      timezones={["Asia/Colombo", "UTC", "America/New_York"]}
      validate={(draft) => {
        if (!draft) return null;
        if (!draft.date || !draft.time) return "Choose both a date and time.";
        return null;
      }}
    />
  );
}

Props

Property	Type	Default	Description
`value`	`ScheduleValue \| null`	`required`	The committed schedule. Use null when no schedule is set.
`onValueChange`	`(value: ScheduleValue \| null) => void`	`—`	Called after a schedule is successfully applied or cleared.
`onApply`	`(value: ScheduleValue \| null) => void \| Promise<void>`	`—`	Persists the draft before it is committed. Throw or reject to keep the editor open.
`formatSummary`	`(value: ScheduleValue \| null) => string`	`—`	Converts the committed or draft value into the readable summary.
`validate`	`(value: ScheduleValue \| null) => string \| null`	`—`	Returns an error message for an invalid draft, or null when it is valid.
`presets`	`SchedulePreset[]`	`[]`	Quick schedule choices displayed above the precise fields.
`timezones`	`string[]`	`["UTC"]`	Timezones available in the editor.
`label`	`string`	`"Edit schedule"`	Accessible label for the schedule control.
`emptyLabel`	`string`	`"Add schedule"`	Text shown while no schedule is committed.
`errorMessage`	`string`	`"Could not update the schedule. Try again."`	Message shown when persistence fails.

Interaction

Opening the chip copies the committed value into a draft. Cancel, Escape, and outside interaction discard that draft. Apply validates the value, calls onApply, and commits through onValueChange only after persistence succeeds.

Accessibility

The summary is a labeled native button. The editor exposes a dialog, native form fields, validation feedback, and explicit Clear, Cancel, and Apply actions. Focus returns to the summary when editing ends.

Motion

The summary and editor share one surface so the change remains connected to its source. Reduced-motion preferences replace the size and content transition with an immediate state change.

Styling

Use the formatting callbacks to match your product's date language. Keep the editor compact and provide only the timezone and preset options relevant to the task.

Sona UI