TimeInput

The TimeInput component is a versatile and reusable component that allows users to input time in hours and minutes format. It allows only numbers as input. We can customize it by passing various props to suit our component needs. In this guide, we’ll walk through how to use the TimeInput component in codebase.

Importing the TimeInput Component

To use the TimeInput component in our app, we need to import it from our styled components. Here’s how we can import it:

import { TimeInput } from "StyledComponents";

Using the TimeInput Component

The TimeInput component can be used with various props to control its appearance. Here are some examples of how we can use it:

<TimeInput
  className="h-8 w-20 rounded-sm bg-muted p-1 text-sm
  onTimeChange={() => ()}
/>

<TimeInput
  className="h-8 w-20 rounded-sm bg-muted p-1 text-sm placeholder:text-muted-foreground"
  initTime={duration}
  name="timeInput"
  onTimeChange={handleDurationChange}
/>

TimeInput Component Props