Leaf UI
  • English

      • TimePicker

      Choose a time.

      Examples

      Values use 24-hour HH:mm, or HH:mm:ss with showSeconds. use12Hours changes the display to a 12-hour clock with AM/PM, while values remain 24-hour. Midnight is 12 AM and noon is 12 PM. The initial draft is 09:00. Close without confirming to discard edits. Minute and second steps preserve an existing value outside the step.

      Live previewBasic selection
      basic.tsx
      import { TimePicker } from '@sudden3/leaf-ui';

export function TimePickerBasic() {
  return (
    <div className="leaf-demo-stack">
      <TimePicker aria-label="Choose a time" />
      <TimePicker aria-label="Default time" defaultValue="09:30" />
      <TimePicker aria-label="Disabled time" defaultValue="18:00" disabled />
    </div>
  );
}
      Live previewControlled value and minute steps
      15-minute steps. Current:14:30
      controlled.tsx
      import { TimePicker } from '@sudden3/leaf-ui';
import { useState } from 'react';

export function TimePickerControlled() {
  const [time, setTime] = useState<string | null>('14:30');
  return (
    <div className="leaf-demo-stack">
      <TimePicker aria-label="Meeting time" value={time} onChange={setTime} minuteStep={15} />
      <span className="leaf-demo-note">15-minute steps. Current:{time || 'Not selected'}</span>
      <TimePicker
        aria-label="Preserved time"
        defaultValue="08:07"
        minuteStep={15}
        allowClear={false}
      />
    </div>
  );
}
      Live preview12-hour clock and seconds
      twelve-hours.tsx
      import { TimePicker } from '@sudden3/leaf-ui';
export function TimePickerTwelveHours() {
  return (
    <div className="leaf-demo-stack">
      <TimePicker aria-label="12-hour clock" use12Hours defaultValue="14:30" />
      <TimePicker
        aria-label="Include seconds"
        use12Hours
        showSeconds
        secondStep={10}
        defaultValue="00:05:30"
      />
    </div>
  );
}

      TimePicker API

      PropertyTypeDefaultDescription
      value / defaultValuestring | nullnullControlled / initial HH:mm value; HH:mm:ss when seconds are enabled
      onChange(value: string | null) => void—Confirmed time; null when cleared
      minuteStepnumber5Minute step, an integer from 1 to 60
      secondStepnumber1Second step, an integer from 1 to 60
      showSecondsbooleanfalseShow seconds and use HH:mm:ss values
      use12HoursbooleanfalseDisplay a 12-hour clock with AM/PM
      allowClearbooleantrueShow a clear button
      placeholderstringLocale defaultPlaceholder when empty; localized by ConfigProvider
      size'sm' | 'md' | 'lg''md'Control size
      status'error' | 'warning'—Validation appearance
      disabledbooleanfalseDisable the control
      name / formstring—Field name / associated form ID
      requiredbooleanfalseRequire a time
      onOpenChange(open: boolean) => void—Panel open-state changes
      refRef<HTMLInputElement>—DOM reference

      Types

      Import TimePickerProps to describe component props. Option types in the API table link to their detailed fields above.

      import type { TimePickerProps } from '@sudden3/leaf-ui';

      Forms and localization

      Use name to include values in FormData. Uncontrolled fields follow form reset; reset controlled values in application state. Place controls in FormField for labels, help and errors. ConfigProvider supplies regional themes and translated built-in UI. Application labels and options are your responsibility.

      Type HH:mm or HH:mm:ss; 12-hour text accepts AM/PM or 上午/下午. Press Enter to submit, or adjust columns and click OK. Every mode requires confirmation. Now updates the draft and still requires OK. Escape or leaving the field discards changes. Other input attributes and aria-* target the input; className/style target the wrapper. ArrowDown moves focus to the selected hour.