Time Input

Time control with hour and minute tiles separated by a colon, plus a small AM or PM segmented toggle.

09:30
AMPM

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Input16 } from "@/components/beste/piece/input16";

<Input16
  hours="09"
  minutes="30"
  meridiem="AM"
/>

More Input pieces

View all Input
1h45m
HH:MM

Length field with a timer icon, h and m unit-annotated number tiles, and an HH:MM format hint.

Apr 01
Apr 30
30 days

Date Range

input17

Joined from-arrow-to range input with a muted duration chip capping the right side of the control.

4

Compact number control with minus and plus buttons flanking a centered mono value.

Remind me to buy coffee beans on my way home

Pill dictation input with a blinking caret, live waveform bars, and a rose mic button while listening.

INV-2026-00421Auto

ID-style mono input with a leading hash, wide letter spacing, and a muted Auto-generated pill.

2026-04-23

Date Input

input15

Date field with a leading calendar icon, mono ISO value, and a chevron hinting at a popover.