Pieces/Input(33)

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

Choose a password
0 characters entered
  • At least 8 characters
  • Contains a number
  • Contains a symbol

Password Strength

Masked characters type into the field while a four-segment meter climbs from rose through amber to emerald and each rule in the checklist ticks green, then it clears and starts over.

Verification codeSent to hello@beste.co
Enter the 6-digit code

OTP Autofill

Six code boxes fill one by one behind a moving caret, shake in rose when the first code is wrong, then refill with the right one and settle into an emerald verified state.

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.

Markdown version