Date Range

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

Apr 01
Apr 30
30 days

New here? Read the installation guide.

Import & use
import { Input17 } from "@/components/beste/piece/input17";

<Input17
  label="Reporting window"
  from="Apr 01"
  to="Apr 30"
  duration="30 days"
/>

More Input pieces

View all Input
09:30
AMPM

Time Input

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

1h45m
HH:MM

Duration Input

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

2026-04-23

Date Input

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

4

Number Stepper

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

Volume68%

Range Slider

Label and readout above a filled track with a circular handle positioned by the current value.

120320
0500

Dual Range Slider

Two-thumb range slider with a filled band between, a mono low-high readout, and min/max caps.

Markdown version