Split Auth
A split authentication shell with a separate brand and story panel.
Make it yours.
Install the editable source and its dependencies into your React + Tailwind project.
Scroll horizontally for long lines
pnpm dlx shadcn@4.0.8 add http://localhost:3000/r/split-auth.jsonUse it
Scroll horizontally for long lines
"use client";
import { SplitAuth } from "@/components/jez-ui/blocks/split-auth";
export default function Example() {
return (
<>
<SplitAuth />
</>
);
}
Compose your own
These styled parts are included in the same install. Use children to build your layout; add className only when you want an override.
Scroll horizontally for long lines
"use client";
import * as React from "react";
import {
SplitAuth,
SplitAuthAside,
SplitAuthMain,
} from "@/components/jez-ui/blocks/split-auth";
export default function Example() {
const [mode, setMode] = React.useState<
"sign-in" | "sign-up" | "reset-request" | "reset-password"
>("sign-in");
return (
<SplitAuth
mode={mode}
onModeChange={setMode}
resetFormProps={
mode === "reset-request"
? {
onSubmit: async () => {
setMode("reset-password");
},
}
: undefined
}
footer={
mode === "reset-request" ? (
<button
type="button"
className="underline underline-offset-4"
onClick={() => setMode("reset-password")}
>
Set new password
</button>
) : undefined
}
>
<SplitAuthAside />
<SplitAuthMain />
</SplitAuth>
);
}
Scroll horizontally for long lines
import { SplitAuth, SplitAuthAside, SplitAuthMain, SplitAuthHeader, SplitAuthTitle, SplitAuthDescription, SplitAuthForm, SplitAuthFooter } from "@/components/jez-ui/blocks/split-auth";Props & types
Scroll horizontally for long lines
export type SplitAuthProps = Omit<
React.ComponentProps<"section">,
keyof SplitAuthOptions
> &
SplitAuthOptions;
SplitAuthPropsSource
View 8 source files
registry/blocks/split-auth.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { cn } from "../ui/utils";
import {
LoginFields,
type LoginHandlers,
type LoginPresentation,
} from "./login-fields";
import {
PasswordResetForm,
PasswordResetFormEmailField,
PasswordResetFormPasswordFields,
PasswordResetFormStatus,
PasswordResetFormSubmit,
type PasswordResetFormProps,
} from "./password-reset-form";
type AuthMode = "sign-in" | "sign-up" | "reset-request" | "reset-password";
type SplitAuthOptions = LoginHandlers &
LoginPresentation & {
mode?: AuthMode;
defaultMode?: AuthMode;
form?: React.ReactNode;
formProps?: React.ComponentProps<typeof LoginFields>;
resetFormProps?: PasswordResetFormProps;
quote?: React.ReactNode;
footer?: React.ReactNode;
onModeChange?: (mode: AuthMode) => void;
};
export type SplitAuthProps = Omit<
React.ComponentProps<"section">,
keyof SplitAuthOptions
> &
SplitAuthOptions;
function useModel({
className,
brand = "COMMON GROUND",
title,
description,
mode = "sign-in",
defaultMode: _defaultMode,
onSubmit,
onSSO,
form,
formProps,
resetFormProps,
quote = "A considered start makes the work feel lighter.",
footer,
onModeChange,
children,
...rootProps
}: SplitAuthProps) {
return {
className,
brand,
title:
title ??
(mode === "sign-up"
? "Build a place for your work."
: mode.startsWith("reset")
? "Let’s get you back on track."
: "Your work is waiting."),
description: description ?? "A focused account space for the work ahead.",
mode,
onSubmit,
onSSO,
form,
formProps,
resetFormProps,
quote,
footer,
onModeChange,
children,
rootProps,
};
}
function useControllableMode(
mode: AuthMode | undefined,
defaultMode: AuthMode | undefined,
onModeChange: ((mode: AuthMode) => void) | undefined,
) {
const [uncontrolledMode, setUncontrolledMode] = React.useState(
defaultMode ?? "sign-in",
);
const value = mode ?? uncontrolledMode;
return [
value,
(nextMode: AuthMode) => {
if (mode === undefined) setUncontrolledMode(nextMode);
onModeChange?.(nextMode);
},
] as const;
}
const Context = React.createContext<ReturnType<typeof useModel> | null>(null);
function useAuth() {
const context = React.useContext(Context);
if (!context) throw new Error("SplitAuth parts must be inside SplitAuth.");
return context;
}
export function SplitAuth(props: SplitAuthProps) {
const [mode, onModeChange] = useControllableMode(
props.mode,
props.defaultMode,
props.onModeChange,
);
const model = useModel({ ...props, mode, onModeChange });
return (
<Context.Provider value={model}>
<section
{...model.rootProps}
className={cn(
"grid min-h-[680px] overflow-hidden rounded-xl border border-border bg-background md:grid-cols-[.95fr_1.05fr]",
model.className,
)}
>
{model.children === undefined ? (
<>
<SplitAuthAside />
<SplitAuthMain />
</>
) : (
model.children
)}
</section>
</Context.Provider>
);
}
export const SplitAuthAside = React.forwardRef<
HTMLElement,
React.ComponentProps<"aside"> & { children?: React.ReactNode }
>(function SplitAuthAside({ className, children, ...props }, ref) {
const { brand, quote } = useAuth();
return (
<aside
ref={ref}
data-slot="split-auth-aside"
className={cn(
"flex min-h-64 flex-col justify-between bg-primary p-7 text-primary-foreground sm:p-10",
className,
)}
{...props}
>
{children === undefined ? (
<>
<p className="text-xs font-semibold tracking-[.2em]">{brand}</p>
<blockquote className="max-w-sm font-display text-3xl leading-tight tracking-tight">
“{quote}”
</blockquote>
<p className="text-xs text-primary-foreground/70">
A calm home for decisive work.
</p>
</>
) : (
children
)}
</aside>
);
});
export const SplitAuthMain = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div"> & { children?: React.ReactNode }
>(function SplitAuthMain({ className, children, ...props }, ref) {
return (
<div
ref={ref}
data-slot="split-auth-main"
className={cn("flex items-center px-7 py-14 sm:px-12", className)}
{...props}
>
{children === undefined ? (
<div className="mx-auto w-full max-w-sm">
<SplitAuthHeader />
<SplitAuthForm />
<SplitAuthFooter />
</div>
) : (
children
)}
</div>
);
});
export function SplitAuthHeader({
children,
...props
}: React.ComponentProps<"header"> & { children?: React.ReactNode }) {
const { title, description } = useAuth();
return (
<header data-slot="split-auth-header" className="mb-8" {...props}>
{children === undefined ? (
<>
<SplitAuthTitle>{title}</SplitAuthTitle>
<SplitAuthDescription>{description}</SplitAuthDescription>
</>
) : (
children
)}
</header>
);
}
export const SplitAuthTitle = React.forwardRef<
HTMLHeadingElement,
React.ComponentProps<"h1">
>(function SplitAuthTitle({ className, ...props }, ref) {
return (
<h1
ref={ref}
data-slot="split-auth-title"
className={cn("font-display text-3xl tracking-tight", className)}
{...props}
/>
);
});
export const SplitAuthDescription = React.forwardRef<
HTMLParagraphElement,
React.ComponentProps<"p">
>(function SplitAuthDescription({ className, ...props }, ref) {
return (
<p
ref={ref}
data-slot="split-auth-description"
className={cn(
"mt-3 text-sm leading-relaxed text-muted-foreground",
className,
)}
{...props}
/>
);
});
export function SplitAuthForm({
children,
...props
}: React.ComponentProps<"div"> & { children?: React.ReactNode }) {
const { mode, onSubmit, onSSO, form, formProps, resetFormProps } = useAuth();
return (
<div data-slot="split-auth-form" {...props}>
{children === undefined
? (form ??
(mode === "reset-request" || mode === "reset-password" ? (
<PasswordResetForm
key={mode}
className="max-w-none border-0 p-0 sm:p-0"
mode={mode === "reset-password" ? "new-password" : "request"}
{...resetFormProps}
>
{mode === "reset-request" ? (
<PasswordResetFormEmailField />
) : (
<PasswordResetFormPasswordFields />
)}
<PasswordResetFormSubmit />
<PasswordResetFormStatus />
</PasswordResetForm>
) : (
<LoginFields
key={mode}
mode={mode}
onSubmit={onSubmit}
onSSO={onSSO}
{...formProps}
/>
)))
: children}
</div>
);
}
export function SplitAuthFooter({
children,
className,
...props
}: React.ComponentProps<"p"> & { children?: React.ReactNode }) {
const { footer, mode, onModeChange } = useAuth();
return (
<p
data-slot="split-auth-footer"
className={cn("mt-7 text-xs text-muted-foreground", className)}
{...props}
>
{children === undefined
? (footer ??
(mode === "sign-in" ? (
<>
<button
type="button"
className="underline underline-offset-4"
onClick={() => onModeChange?.("reset-request")}
>
Forgot password?
</button>
<span aria-hidden="true"> · </span>
<button
type="button"
className="underline underline-offset-4"
onClick={() => onModeChange?.("sign-up")}
>
Sign up
</button>
</>
) : (
<button
type="button"
className="underline underline-offset-4"
onClick={() => onModeChange?.("sign-in")}
>
Sign in
</button>
)))
: children}
</p>
);
}
registry/ui/utils.ts
Scroll horizontally for long lines
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...values: ClassValue[]) {
return twMerge(clsx(values));
}
registry/blocks/login-fields.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { cn } from "../ui/utils";
import { Github, ArrowRight, KeyRound, Building2 } from "lucide-react";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { PasswordInput } from "../ui/password-input";
export type LoginPresentation = {
className?: string;
title?: React.ReactNode;
description?: React.ReactNode;
brand?: string;
};
export type LoginHandlers = {
onSubmit?: (credentials: {
email: string;
password: string;
}) => Promise<void> | void;
onSSO?: (
provider: "google" | "github" | "saml",
email?: string,
) => Promise<void> | void;
};
export function LoginFields({
onSubmit,
onSSO,
enterprise = false,
mode = "sign-in",
children,
className,
...rootProps
}: Omit<React.ComponentProps<"div">, keyof LoginHandlers> &
LoginHandlers & { enterprise?: boolean; mode?: "sign-in" | "sign-up" }) {
const [pending, setPending] = React.useState<string | null>(null),
[message, setMessage] = React.useState(""),
[error, setError] = React.useState(false);
async function run(key: string, action?: () => Promise<void> | void) {
setPending(key);
setMessage("");
setError(false);
try {
if (action) {
await action();
setMessage(
mode === "sign-up"
? "Account request completed."
: "Sign-in request completed.",
);
} else
setMessage(
"Demo only. Connect your authentication provider to sign in.",
);
} catch (e) {
setError(true);
setMessage(
e instanceof Error ? e.message : "Sign-in failed. Please try again.",
);
} finally {
setPending(null);
}
}
return (
<div {...rootProps} className={cn("grid gap-5", className)}>
{children !== undefined ? (
children
) : (
<>
<div className="grid gap-2">
<Button
disabled={!!pending}
loading={pending === "google"}
variant="outline"
className="w-full"
onClick={() =>
run("google", onSSO ? () => onSSO("google") : undefined)
}
>
<svg aria-hidden="true" viewBox="0 0 24 24" className="size-4">
<path
fill="currentColor"
d="M21.6 12.23c0-.71-.06-1.39-.18-2.05H12v3.88h5.38a4.6 4.6 0 0 1-2 3.02v2.51h3.24c1.9-1.75 2.98-4.33 2.98-7.36ZM12 22c2.7 0 4.96-.9 6.61-2.41l-3.23-2.51c-.9.6-2.05.96-3.38.96-2.6 0-4.8-1.76-5.58-4.12H3.08v2.59A10 10 0 0 0 12 22ZM6.42 13.92A6 6 0 0 1 6.1 12c0-.67.11-1.32.32-1.92V7.49H3.08A10 10 0 0 0 2 12c0 1.61.39 3.14 1.08 4.51l3.34-2.59ZM12 5.96c1.47 0 2.79.5 3.83 1.5l2.87-2.88A9.62 9.62 0 0 0 12 2a10 10 0 0 0-8.92 5.49l3.34 2.59A5.99 5.99 0 0 1 12 5.96Z"
/>
</svg>
Continue with Google
</Button>
<Button
disabled={!!pending}
loading={pending === "github"}
variant="outline"
className="w-full"
onClick={() =>
run("github", onSSO ? () => onSSO("github") : undefined)
}
>
<Github size={16} />
Continue with GitHub
</Button>
</div>
<div className="flex items-center gap-4 text-xs text-muted-foreground">
<span className="h-px flex-1 bg-border" />
or continue with {enterprise ? "SSO" : "email"}
<span className="h-px flex-1 bg-border" />
</div>
<form
className="grid gap-4"
onSubmit={(e) => {
e.preventDefault();
const data = new FormData(e.currentTarget),
email = String(data.get("email")),
password = String(data.get("password") ?? "");
if (
!enterprise &&
mode === "sign-up" &&
password !== String(data.get("passwordConfirmation") ?? "")
) {
setError(true);
setMessage(
"Passwords do not match. Check both fields and try again.",
);
return;
}
void run(
"email",
enterprise
? onSSO
? () => onSSO("saml", email)
: undefined
: onSubmit
? () => onSubmit({ email, password })
: undefined,
);
}}
>
<label className="grid gap-2 text-xs font-medium">
{enterprise ? "Work email" : "Email address"}
<Input
name="email"
type="email"
autoComplete="email"
required
placeholder={enterprise ? "you@company.com" : "you@example.com"}
/>
</label>
{!enterprise && (
<label className="grid gap-2 text-xs font-medium">
Password
<PasswordInput
name="password"
autoComplete={
mode === "sign-up" ? "new-password" : "current-password"
}
required
placeholder="Enter your password"
/>
</label>
)}
{!enterprise && mode === "sign-up" && (
<label className="grid gap-2 text-xs font-medium">
Confirm password
<PasswordInput
name="passwordConfirmation"
autoComplete="new-password"
required
placeholder="Confirm your password"
/>
</label>
)}
<Button
type="submit"
disabled={!!pending}
loading={pending === "email"}
className="mt-1 w-full"
>
{enterprise ? (
<>
<Building2 size={16} />
Continue with SSO
</>
) : (
<>
{mode === "sign-up" ? "Create account" : "Sign in"}
<ArrowRight size={16} />
</>
)}
</Button>
</form>
{message && (
<p
role={error ? "alert" : "status"}
className={
error
? "text-xs text-danger"
: "text-xs leading-relaxed text-muted-foreground"
}
>
{message}
</p>
)}
<p className="flex items-center justify-center gap-2 text-xs text-muted-foreground">
<KeyRound size={12} />
Your workspace. Your secure way in.
</p>
</>
)}{" "}
</div>
);
}
registry/ui/button.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { Slot } from "radix-ui";
import { LoaderCircle } from "lucide-react";
import { cn } from "./utils";
export type ButtonProps = React.ComponentProps<"button"> & {
variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
size?: "sm" | "md" | "lg";
loading?: boolean;
asChild?: boolean;
};
export function Button({
variant = "primary",
size = "md",
loading,
asChild,
className,
children,
disabled,
...props
}: ButtonProps) {
const Comp = asChild ? Slot.Root : "button";
return (
<Comp
type={asChild ? undefined : "button"}
disabled={asChild ? undefined : disabled || loading}
aria-disabled={disabled || loading || undefined}
aria-busy={loading || undefined}
className={cn(
"relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-lg border border-transparent text-sm font-medium leading-none transition-[background-color,border-color,box-shadow,transform] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:scale-[.98] disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none [&_svg]:shrink-0",
{
"bg-primary text-primary-foreground shadow-[inset_0_1px_0_#ffffff26,0_1px_2px_#00000012] hover:bg-primary/90":
variant === "primary",
"border-border/60 bg-muted text-foreground hover:bg-muted/70":
variant === "secondary",
"border-border bg-background text-foreground shadow-sm hover:bg-muted/60":
variant === "outline",
"text-muted-foreground hover:bg-muted hover:text-foreground":
variant === "ghost",
"bg-danger text-danger-foreground hover:bg-danger/90":
variant === "danger",
},
{
"h-8 px-3 text-xs": size === "sm",
"h-10 px-4": size === "md",
"h-12 px-6": size === "lg",
},
className,
)}
{...props}
>
{asChild ? (
children
) : (
<>
<span
className={cn(
"inline-flex min-w-0 flex-1 items-center justify-center gap-2",
loading && "invisible",
)}
>
{children}
</span>
{loading && (
<LoaderCircle
aria-hidden="true"
className="absolute size-4 animate-spin motion-reduce:animate-none"
/>
)}
</>
)}
</Comp>
);
}
registry/ui/input.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { cn } from "./utils";
export function Input({ className, ...props }: React.ComponentProps<"input">) {
return (
<input
className={cn(
"block h-10 w-full min-w-0 rounded-lg border border-border bg-background px-3 text-sm leading-normal shadow-[0_1px_2px_#00000004] transition-[border-color,box-shadow] placeholder:text-muted-foreground/75 hover:border-foreground/25 focus:border-primary focus:outline-none focus:ring-3 focus:ring-primary/10 aria-invalid:border-danger aria-invalid:ring-danger/10 disabled:cursor-not-allowed disabled:bg-muted/50 disabled:opacity-50",
className,
)}
{...props}
/>
);
}
registry/ui/password-input.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { Eye, EyeOff, LockKeyhole } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { Input } from "./input";
import { cn } from "./utils";
export function PasswordInput({
className,
inputClassName,
...props
}: Omit<React.ComponentProps<typeof Input>, "type"> & {
inputClassName?: string;
}) {
const [visible, setVisible] = React.useState(false);
const reduce = useReducedMotion();
return (
<div className={cn("group relative w-full", className)}>
<LockKeyhole
size={15}
className="pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-muted-foreground transition-colors group-focus-within:text-primary"
/>
<Input
aria-label="Password"
autoComplete="current-password"
{...props}
type={visible ? "text" : "password"}
className={cn("px-10", inputClassName)}
/>
<button
type="button"
disabled={props.disabled}
aria-label={visible ? "Hide password" : "Show password"}
aria-pressed={visible}
onMouseDown={(e) => e.preventDefault()}
onClick={() => setVisible((v) => !v)}
className="absolute right-1 top-1 grid size-8 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
>
<AnimatePresence mode="wait" initial={false}>
<motion.span
key={String(visible)}
initial={{
opacity: 0,
rotate: reduce ? 0 : -35,
scale: reduce ? 1 : 0.7,
}}
animate={{ opacity: 1, rotate: 0, scale: 1 }}
exit={{
opacity: 0,
rotate: reduce ? 0 : 35,
scale: reduce ? 1 : 0.7,
}}
transition={{ duration: reduce ? 0 : 0.12 }}
>
{visible ? <EyeOff size={16} /> : <Eye size={16} />}
</motion.span>
</AnimatePresence>
</button>
</div>
);
}
registry/blocks/password-reset-form.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { cn } from "../ui/utils";
import { LockKeyhole } from "lucide-react";
import { Input } from "../ui/input";
import { FormField } from "../ui/form-field";
import { Button } from "../ui/button";
export type PasswordResetFormOptions = {
className?: string;
onSubmit?: (data: Record<string, string>) => Promise<void>;
heading?: React.ReactNode;
mode?: "request" | "new-password";
};
export type PasswordResetFormProps = Omit<
React.ComponentProps<"form">,
keyof PasswordResetFormOptions
> &
PasswordResetFormOptions;
function usePasswordResetFormModel({
heading,
mode = "request",
className,
onSubmit,
children,
...rootProps
}: PasswordResetFormProps) {
const [status, setStatus] = React.useState("");
const [error, setError] = React.useState(false);
const [busy, setBusy] = React.useState(false);
return {
heading:
heading ??
(mode === "new-password"
? "Choose a new password."
: "Forgot your password?"),
mode,
className,
onSubmit,
children,
rootProps,
status,
setStatus,
error,
setError,
busy,
setBusy,
};
}
const PasswordResetFormCompositionContext = React.createContext<ReturnType<
typeof usePasswordResetFormModel
> | null>(null);
function usePasswordResetFormComposition() {
const context = React.useContext(PasswordResetFormCompositionContext);
if (!context)
throw new Error(
"PasswordResetForm parts must be inside PasswordResetForm.",
);
return context;
}
export function PasswordResetForm(props: PasswordResetFormProps) {
const model = usePasswordResetFormModel(props);
const {
className,
onSubmit,
rootProps,
setStatus,
setError,
setBusy,
children,
mode,
} = model;
return (
<PasswordResetFormCompositionContext.Provider value={model}>
<form
{...rootProps}
className={cn(
"grid w-full max-w-md gap-5 rounded-2xl border border-border bg-background p-7 sm:p-9",
className,
)}
onSubmit={async (e) => {
e.preventDefault();
const data = Object.fromEntries(
new FormData(e.currentTarget),
) as Record<string, string>;
if (
mode === "new-password" &&
data.password !== data.passwordConfirmation
) {
setError(true);
setStatus(
"Passwords do not match. Check both fields and try again.",
);
return;
}
setBusy(true);
setError(false);
try {
await onSubmit?.(data);
setStatus(
onSubmit
? mode === "new-password"
? "Password updated."
: "Request complete."
: mode === "new-password"
? "Demo complete. No password was changed."
: "Demo complete. No account or email was created.",
);
} catch {
setError(true);
setStatus("Unable to continue. Check your details and try again.");
} finally {
setBusy(false);
}
}}
>
{children !== undefined ? (
children
) : (
<>
<PasswordResetFormIntro />
{mode === "request" ? (
<PasswordResetFormEmailField />
) : (
<PasswordResetFormPasswordFields />
)}
<PasswordResetFormSubmit />
<PasswordResetFormStatus />
</>
)}
</form>
</PasswordResetFormCompositionContext.Provider>
);
}
export function PasswordResetFormContent({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="password-reset-form-content"
className={cn("mb-2", className)}
{...props}
/>
);
}
export function PasswordResetFormTitle({
className,
...props
}: React.ComponentProps<"h2">) {
return (
<h2
data-slot="password-reset-form-title"
className={cn("font-display text-2xl", className)}
{...props}
/>
);
}
export function PasswordResetFormIntro({
children,
...props
}: Partial<React.ComponentProps<typeof PasswordResetFormContent>> & {
children?: React.ReactNode;
}) {
const { heading, mode } = usePasswordResetFormComposition();
return (
<PasswordResetFormContent {...props}>
{children === undefined ? (
<>
<span className="mb-5 grid size-10 place-items-center rounded-xl border border-border bg-muted/30">
<LockKeyhole size={18} />
</span>
<PasswordResetFormTitle>{heading}</PasswordResetFormTitle>
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
{mode === "new-password"
? "Choose a new password for your account."
: "Enter the email address associated with your account."}
</p>
</>
) : (
children
)}
</PasswordResetFormContent>
);
}
export function PasswordResetFormEmailField({
children,
...props
}: Partial<React.ComponentProps<typeof FormField>> & {
children?: React.ReactNode;
}) {
const {} = usePasswordResetFormComposition();
return (
<FormField label="Email" {...props}>
{children === undefined ? (
<Input
name="email"
type="email"
required
autoComplete="email"
placeholder="you@company.com"
/>
) : (
children
)}
</FormField>
);
}
export function PasswordResetFormSubmit({
children,
...props
}: Partial<React.ComponentProps<typeof Button>> & {
children?: React.ReactNode;
}) {
const { busy, mode } = usePasswordResetFormComposition();
return (
<Button type="submit" loading={busy} {...props}>
{children === undefined
? mode === "new-password"
? "Update password"
: "Send reset link"
: children}
</Button>
);
}
export function PasswordResetFormPasswordFields({
children,
className,
...props
}: React.ComponentProps<"div"> & {
children?: React.ReactNode;
}) {
return (
<div
data-slot="password-reset-form-password-fields"
className={cn("grid gap-4", className)}
{...props}
>
{children === undefined ? (
<>
<FormField label="New password">
<Input
name="password"
type="password"
autoComplete="new-password"
required
/>
</FormField>
<FormField label="Confirm new password">
<Input
name="passwordConfirmation"
type="password"
autoComplete="new-password"
required
/>
</FormField>
</>
) : (
children
)}
</div>
);
}
export function PasswordResetFormStatus({ children }: React.PropsWithChildren) {
const { status, error } = usePasswordResetFormComposition();
return children === undefined
? status && (
<p
role={error ? "alert" : "status"}
className={cn("text-sm", error && "text-danger")}
>
{status}
</p>
)
: children;
}
registry/ui/form-field.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { cn } from "./utils";
export function FormField({
label,
hint,
error,
children,
className,
...rootProps
}: Omit<
React.ComponentProps<"div">,
keyof {
label: string;
hint?: string;
error?: string;
children: React.ReactElement<{
id?: string;
"aria-describedby"?: string;
"aria-invalid"?: boolean;
}>;
className?: string;
}
> & {
label: string;
hint?: string;
error?: string;
children: React.ReactElement<{
id?: string;
"aria-describedby"?: string;
"aria-invalid"?: boolean;
}>;
className?: string;
}) {
const generatedId = React.useId();
const id = children.props.id ?? generatedId;
return (
<div {...rootProps} className={cn("grid gap-2", className)}>
<label htmlFor={id} className="text-sm font-medium">
{label}
</label>
{React.cloneElement(children, {
id,
"aria-describedby":
[
children.props["aria-describedby"],
hint || error ? id + "-help" : undefined,
]
.filter(Boolean)
.join(" ") || undefined,
"aria-invalid": error ? true : children.props["aria-invalid"],
})}
{(hint || error) && (
<p
id={id + "-help"}
role={error ? "alert" : undefined}
className={cn(
"text-xs",
error ? "text-danger" : "text-muted-foreground",
)}
>
{error || hint}
</p>
)}
</div>
);
}
export function Field({ className, ...props }: React.ComponentProps<"div">) {
return <div className={cn("grid gap-2", className)} {...props} />;
}
export function FieldGroup({
className,
...props
}: React.ComponentProps<"div">) {
return <div className={cn("grid gap-6", className)} {...props} />;
}
export function FieldSet({
className,
...props
}: React.ComponentProps<"fieldset">) {
return (
<fieldset className={cn("grid min-w-0 gap-5", className)} {...props} />
);
}
export function FieldLegend({
className,
...props
}: React.ComponentProps<"legend">) {
return <legend className={cn("mb-3 font-medium", className)} {...props} />;
}
export function FieldLabel({
className,
...props
}: React.ComponentProps<"label">) {
return <label className={cn("text-sm font-medium", className)} {...props} />;
}
export function FieldDescription({
className,
...props
}: React.ComponentProps<"p">) {
return (
<p
className={cn("text-xs leading-relaxed text-muted-foreground", className)}
{...props}
/>
);
}
export function FieldError({ className, ...props }: React.ComponentProps<"p">) {
return (
<p
role="alert"
className={cn("text-xs leading-relaxed text-danger", className)}
{...props}
/>
);
}
export function FieldContent({
className,
...props
}: React.ComponentProps<"div">) {
return <div className={cn("grid min-w-0 gap-1", className)} {...props} />;
}
export function FieldRow({
className,
...props
}: React.ComponentProps<"label">) {
return (
<label
className={cn("flex items-center gap-3 text-sm font-medium", className)}
{...props}
/>
);
}
Dependencies
clsx@2.1.1 · tailwind-merge@3.5.0 · lucide-react@0.577.0 · radix-ui@1.6.7 · motion@13.2.0
Accessibility & behaviour
Provide meaningful labels and preserve keyboard focus styles. Check contrast when customising theme colours.
Read the accessibility and performance guide →