Responsive Auth Card PatternExperimental
Responsive authentication card with Japanese labels, validation, and typed submit callbacks.
プレビュー
状態とバリエーション
defaultMode がどちらの札で開くかを決め、labels がカードの文字を丸ごと差し替えます。規約と再設定のリンク先は termsHref・privacyHref・forgotPasswordHref で指します。
作成の札で開く
defaultMode="create" を渡すと、アカウント作成の札が選ばれた状態で出ます。招待のリンクから来た人に見せる形です。
文字を丸ごと差し替える
組み込みの文字は日本語です。別の言い回しや別の言語で出すときは labels に渡します。渡した分だけが上書きされます。
リンク先を実在の頁に向ける
termsHref・privacyHref・forgotPasswordHref の既定は "#" です。公開する前に、規約・方針・再設定の頁へ向け直します。
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| brandName | React.ReactNode | "Gunjo Studio" | Product or workspace name shown above the card. |
| description | React.ReactNode | - | Line under the brand name that explains what the card is for. |
| defaultMode | "sign-in" | "create" | "sign-in" | Which tab is active when the card first renders. |
| signInTitle | React.ReactNode | - | Card title on the sign-in tab. |
| signInDescription | React.ReactNode | - | Card description on the sign-in tab. |
| createTitle | React.ReactNode | - | Card title on the create-account tab. |
| createDescription | React.ReactNode | - | Card description on the create-account tab. |
| termsHref | string | "#" | Destination for the terms-of-service link under the create-account form. |
| privacyHref | string | "#" | Destination for the privacy-policy link under the create-account form. |
| forgotPasswordHref | string | "#" | Destination for the forgot-password link on the sign-in tab. |
| labels | Partial<ResponsiveAuthCardPatternLabels> | - | Every string in the card — tabs, field labels, placeholders, password rules, and validation messages. Defaults are Japanese, so pass this to run the card in another language. |
| onSignIn | (values: ResponsiveAuthCardPatternSignInValues) => void | - | Called with { email, password, remember } once the sign-in form passes validation. |
| onCreateAccount | (values: ResponsiveAuthCardPatternCreateAccountValues) => void | - | Called with { name, email, password } once the create-account form passes validation. |
| className | string | - | Additional CSS class names. |
Usage
import { ResponsiveAuthCardPattern } from "@gunjo/ui"
export function Example() {
return <ResponsiveAuthCardPattern />
}