Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA sign-in form in a bottom sheet with email and password fields that show the right keyboard, a show-password toggle, inline errors that move focus, and a pending state that blocks double submits. Use this when a phone app lets people keep browsing and asks for sign-in only at the moment they need an account.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when a phone app lets people keep browsing and asks for sign-in only at the moment they need an account.
Do not use it for the first screen of an app (use a full page) or for passwordless flows (use an OTP or magic link).
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
onSignIn | (credentials: { email: string; password: string }) => Promise<void> | required | Sign in. A rejection shows the message and keeps the sheet open. |
children | ReactNode | - | The trigger. |
type="email", autocomplete="username" and the email keyboard; the password uses autocomplete="current-password" and a labelled Show password toggle (aria-pressed).role="alert" messages tied to fields with aria-describedby; the first invalid field takes focus.The pattern ships with a Testing Library test (login-bottom-sheet.test.tsx) that drives it through roles and the keyboard.