Pieces/Form(40)

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

This site is privateyourdomain.com
Enter a password

Every page is covered, not only this one.

Password Gate

The gate a private site shows before any of its pages, its single field filling character by character while the domain it belongs to sits above.

Cookie Preferences
NecessaryRequired
Functional
Analytics
Marketing

Consent Categories

Cookie categories a visitor decides on one at a time, the essential row held on and locked while the others switch under a moving choice.

How was your experience?

Thanks for the feedback!

Tap a star to rate

Rating Prompt

A pointer sweeps across five stars, lighting them up as it passes, pops the fourth one to choose it, and the prompt crossfades into a thank-you line before the loop restarts.

Create your workspace

Form Autofill

Name, email and company get typed in one after another behind a caret, then the Continue button spins through a loading state and morphs into an emerald check that says you're in.

One email when we open the doors. Nothing else.

Inline Subscribe Row

A single-row capture card with a labelled email field, an accent submit button beside it, and fine print underneath.

Notifications

New bookings
Payment received
Weekly summary

Preferences Toggles

A compact settings card listing labeled rows, each with an accent on/off toggle switch.

Get early access

you@clinic.com
Notify me

No spam, just one launch note.

Email Capture Card

A compact signup card with a title, an email field, an accent submit button, and a small reassurance note.

Consent Row

Legal consent card with a custom checkbox, inline underlined policy links, and a red asterisk when required.

sk_••••••••••••••••••••••••••••0000

Copyable Field

Read-only value with an optional mask toggle and a copy button that flips to an emerald Copied state on click.

Mira & Co.

Inline Edit

Click-to-edit field that toggles between a plain value with a hover pencil and an input flanked by save and cancel buttons.

16
1224

Stepped Slider

Font-size slider with discrete tick dots under the rail and a mono value chip in the header.

Start typing to search
Beste Sözen
Beste SözenDesign lead
Mirko Petrov
Mirko PetrovEngineer
Noor Ahmed
Noor AhmedProduct

Contact Picker

Searchable people picker with a focused search input above a list that tints the selected row.

Saved
Beste Sözen
Auto-saves as you type.Saved just now

Autosave Field

Inline field with an autosave status pill that shifts between saved, saving, and unsaved dot colors.

USD · US Dollar

Native Select

Open-state select showing the focused control and the flyout list with one option muted as chosen.

Violet · #6D5EFA

Color Swatches

Row of round color swatches where the selected one picks up an outer contrast ring.

Friendly
FormalNeutralFriendlyPlayful

Tick Slider

Labeled-tick slider with a primary fill, a value pill in the header, and the active tick bolded.

Segmented Control

Pill-grouped segmented control with inset muted track and a raised card under the active choice.

Delivery speed
Standard3–5 business days · Free
ExpressNext business day · $8
Same-dayOrder by noon · $14

Radio Group

Radio-card list where the selected row picks up a primary ring and a tinted background.

Notifications

Checkbox Group

Legend-headed list of notification toggles with filled primary checks and muted helper lines.

Two-factor authenticationRequire a verification code at sign-in.

Toggle Switch

Setting row with label, supporting copy, and a sliding switch that turns emerald when on.

Assign to
Filter people…
Beste Sözen
Beste Sözen
Andrea Kim
Andrea Kim
Noor Ahmed
Noor Ahmed
Jules Park
Jules Park

Assignee Picker

Popover with a header label, filter bar, and a selectable person list that checks chosen rows.

532 000 12 34
We'll text a login code if you enable 2FA.

Phone Input

Phone field with a flag and dial-code chooser on the left, then the national number in mono.

Mira Studio
acm
Beste StudioDesign · 12 members
BesteworksEngineering · 34 members
Beste LabsResearch · 6 members

Combobox

Searchable single-select with a query bar above a filtered list and a check for the active row.

lara@beste.conils@beste.coom@acmeSeparate with commas
om@acme is missing the domain ending.

Email Tokenizer

Bulk invite field that tokenizes addresses into chips and flags invalid ones with a rose tint.

Markdown version