Pieces/Input

Compact, self-contained widgets that behave like assets. Drop them into any block, card, or page to add a small touch of polish without rewriting the surrounding UI.

you@company.com

Email Subscribe

input1

Inline email field with a mail icon and a primary submit button docked on the right.

4
2
7

OTP Digit Boxes

input2

Row of square digit cells with a blinking cursor in the next empty slot.

Email notificationsGet updates when teammates comment

Toggle Row

input3

Row with a bold label, secondary description, and a switch that slides on or off.

Volume68%

Range Slider

input4

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

Beste Sözen

Text Field

input5

Bare text input atom with a focused state that adds a primary ring and a blinking caret after the value.

4

Number Stepper

input6

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

$12,480.00USD

Currency Input

input7

Money field with a leading currency symbol, right-aligned mono amount, and a unit label.

Keyboard shortcut
ShiftK
REC
Press any combination

Shortcut Recorder

input8

Keyboard shortcut field that renders the captured keys as keycap pills with a blinking REC indicator while recording.

design tokens

Search Pill

input9

Pill-shaped search input with a leading magnifier and an inline pill-shaped clear when there is a value.

Thanks for the thorough write-up. Two things came to mind while reading — first, the retry logic feels brittle around rate limits;
Shift + ↵ for new line

Textarea

input10

Multi-line input with a shift-enter hint row and a visible corner grip for resize.

••••••••••••••••

Password Dots

input11

Masked password row rendered as spaced mono bullets paired with an eye reveal button.

acct_7Z91X2Q
Provided by admin. Contact support to change.

Readonly Input

input12

Locked field with a muted fill, padlock icon, and a why-locked helper line underneath.

small, compact, dense

Dense Input

input13

Tight small-size text field for data tables and filter rails, with smaller type and tight padding.

Ready when you are

Hero Input

input14

Oversized text field with large type and a fatter caret, made for hero sections and prompt bars.

2026-04-23

Date Input

input15

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

09:30
AMPM

Time Input

input16

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

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.

passport-scan.pdf842 KB

File Input

input18

File picker with a muted Choose file button on the left and the selected filename and size on the right.

$420
$0$1000

Budget Slider

input19

Slider with a primary-tinted track, current value badge on the right, and min/max labels on the rail.

Mira violet#6D5EFA

Color Input

input20

Color field pairing a filled swatch with the chosen name and hex code and an eyedropper button.

1h45m
HH:MM

Duration Input

input21

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

How was your stay?
4.0
Tap to rate. Optional comment on the next step.

Rating Input

input22

Five-star rater with filled amber stars in muted tiles and a decimal rating chip to the right.

Cabin upgrade$38 each
2

Quantity Stepper

input23

Line-item card with a label-price stack and a pill stepper that enforces min zero and a max cap.

120320
0500

Dual Range Slider

input24

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