UI Skillbook
2

Time Field

An hour and minute input with typed segments and an optional selector, submitting 24-hour HH:mm.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-time-field and follow the Siteplane Time Field skill it prints for this task.

Paste this into your agent.

Time Field takes times without a date: daily summaries, opening hours, reminder times, shift starts. It shows 12- or 24-hour time and supports a minute step in its selector.

Install

bashnpx shadcn@4.18.0 add @siteplane/time-field

Import it from @/siteplane/components/time-field. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Date Time Picker: Pick Date Time Picker when the time belongs to a specific day.
  • vs Select: Pick Select when only a few fixed time slots are allowed.
  • vs Date Field: Pick Date Field when the value is a day rather than a time.

Rules

  • Treat the value as { hour, minute } in 24-hour time, even with hourCycle={12}.
  • Store null for an empty controlled value. undefined from onValueChange means cleared.
  • Set name to submit HH:mm, and required with FieldError for the missing message.
  • Use minuteStep for the selector. The field does not round typed minutes, so validate the step on the server.
  • Use iconMode="decorative-start" for compact start/end pairs, and do not pass a locale prop.

Reference

  • Time Field docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Date & color. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-time-field

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Form Field Validation Timingby UI Skillbook

Validate at the right moment — not on every keystroke, not only on submit.

Forms

Siteplane Attachmentby UI Skillbook

A card for a file or image attached to a message or draft, with upload states and actions.

Siteplane UI

Siteplane Autocompleteby UI Skillbook

A text input that suggests completions while still accepting whatever the person types.

Siteplane UI

Siteplane Calendarby UI Skillbook

An inline month grid for picking a single date, several dates or a range, with unavailable-day rules.

Siteplane UI

Back to Siteplane UI