SignUp
Creates an account: name, email, a checked password and the terms.
SourcePackage @weft-js/warp
Preview
tsx
import { state } from '@weft-js/core'import { AuthDone, SignUp } from '@weft-js/warp'import type { SignUpValues } from '@weft-js/warp'export function Weft() { const pending = state(false) const made = state('') const submit = async (values: SignUpValues) => { pending.value = true await wait(900) pending.value = false made.value = values.name } return ( <> {made.value ? <AuthDone heading="h3" title={`Welcome, ${made.value}`} lede="Your workspace is ready." delay={2400} onContinue={() => (made.value = '')} /> : <SignUp heading="h3" title="Create your workspace" lede="Sample values only: nothing is sent." terms="I agree to the terms" providers={PROVIDERS} pending={pending.value} onSubmit={v => void submit(v)} onSignIn={() => {}} />} </> )}const wait = (ms: number) => new Promise(done => { setTimeout(done, ms) })const PROVIDERS = [{ id: 'google', label: 'Google', glyph: 'M12 3a9 9 0 1 0 8.5 12H12' }, { id: 'github', label: 'GitHub', glyph: 'M9 8l-5 4 5 4M15 8l5 4-5 4' }]Installation
npm install @weft-js/warpUsage
tsx
import { SignUp } from '@weft-js/warp'Accessibility
- This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
title | unknown | — | The heading. |
lede | unknown | — | One line under it. |
submitLabel | unknown | — | The main button's words. |
terms | unknown | — | The terms checkbox's words, links included. |
providers | SsoProvider[] | — | Single sign-on providers. |
form | FormLike | — | What <Form of={mutation}> gives you. The screen then renders no form of its own. |
errors | Record<string, string> | — | Messages by field name. |
error | unknown | — | The failure: a string, or a typed error it can map to the right place. |
errorOptions | FlowErrorOptions | — | Words by error code. |
pending | boolean | false | Shows progress on the submit button. |
heading | Heading | — | The title's level. An auth step is usually the whole page, so h1. |
| Event | Type | Default | Description |
|---|---|---|---|
onProvider | ((id: string) => unknown) | — | Called with the provider's id. |
onSignIn | (() => void) | — | Shows the link to sign in. |
onSubmit | ((values: SignUpValues, e: SubmitEvent) => void) | — | Called with the values once the screen's own checks pass. |
onRetry | (() => void) | — | The Retry on a network failure's toast. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="sign-up"] [data-part="lede"]
lededividerfine