Pieces/Input(31)

Input pieces from Beste UI, drop-in widgets built with shadcn/ui and Tailwind CSS.

Search anything...

Search Field

Static search affordance with a lucide icon, placeholder, and an optional shortcut chip on the right.

Ξ
0x4A81…6fA0ENS
Ethereum · Mainnet

Wallet Input

Crypto address field with a gradient Ξ avatar, shortened mono address, and an ENS lookup chip.

INV-2026-00421Auto

Serial Input

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

/^[a-z]+@beste\.co$/gi42

Regex Input

Regex field with slash delimiters, flag suffix in amber, and an emerald match-count pill on the right.

Can we ping @mira about the #launch-prep agenda?

Mentions & Tags

Message input that highlights @-mentions in sky and #channel tags in violet amid plain body text.

Remind me to buy coffee beans on my way home

Dictation Input

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

typescript
12
const answer = 42;return answer * 2;

Code Input

Dark mono code field with a language eyebrow, line-number gutter, and content lines on a foreground canvas.

€120 – €320
€0€500

Dual Range Slider

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

Cabin upgrade$38 each
2

Quantity Stepper

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

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

Rating Input

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

1h45m
HH:MM

Duration Input

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

Mira violet#6D5EFA

Color Input

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

$420
$0$1000

Budget Slider

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

passport-scan.pdf842 KB

File Input

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

Apr 01
Apr 30
30 days

Date Range

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

09:30
AMPM

Time Input

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

2026-04-23▼

Date Input

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

Ready when you are

Hero Input

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

small, compact, dense

Dense Input

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

acct_7Z91X2Q
Provided by admin. Contact support to change.

Readonly Input

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

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

Password Dots

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

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

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

design tokens

Search Pill

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

Keyboard shortcut
⌘ShiftK
REC
Press any combination

Shortcut Recorder

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

Markdown version