Password Gate

This site is privateyourdomain.com
Enter a password

Every page is covered, not only this one.

About this piece

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.

Playground

Turn the props on the right; the snippet under them is what you would write to get what you see.

This site is privateyourdomain.com
Enter a password

Every page is covered, not only this one.

Usage
import { Form40 } from "@/components/beste/component/form40";

<Form40
  domain="yourdomain.com"
  note="Every page is covered, not only this one."
/>

Usage

The import and the props worth knowing about, in one place.

import { Form40 } from "@/components/beste/piece/form40";

<Form40
  surface="card"
  bordered={true}
  inverted={false}
  domain="yourdomain.com"
  title="This site is private"
  placeholder="Enter a password"
  submitLabel="Apply"
  note="Every page is covered, not only this one."
  length={8}
  stepMs={190}
/>

More Form pieces

View all Form
••••••••••••
Strong
Use 12+ characters, mixed case, and a number or symbol.

Password Strength

Password field with a four-segment meter underneath that shifts color and label with strength.

•••••••••••••••••••••Caps

Password Toggle

Masked password input with a caps-lock alert pill and an eye button that flips visibility.

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.

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.

https://docs.beste.co

Affixed Input

Input that sandwiches a value between a muted prefix and suffix for URLs, currencies, or domains.

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.