Time Picker

A time picker allows users to select a specific time.

Base Components

Overview

A time picker is an interactive component that allows users to select a specific time from a clock interface or input field.
https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FGl3138LYJ71TKOZEC0F8nJ%2FShipfaster-UI---v2.7.1-(LIVE)%3Fnode-id%3D3920-13550%26t%3DpA8X0YmO6d7F2SMU-1

When should you use them?

Use time pickers in forms where users need to input time, such as scheduling appointments, setting reminders, or booking events.

How should you use them?

  • Ensure the time picker is easy to use and navigate.
  • Allow for both manual input and selection from the interface.
  • Provide validation to prevent invalid time entries.
  • Highlight the current time and any selected times.
  • Make sure the time picker is accessible, with keyboard navigation and screen reader support.
Previous

No previous post
Up next

No next post