Patterns
Authentication Pattern
semantic HTML로그인, 복구, 다단계 인증 폼을 구성합니다.
Live example
<form class="x-stack" data-standard-component="auth-pattern" data-example-form="auth"><h3>Sign in</h3><label>Email<input type="email" autocomplete="username" required value="[email protected]"></label><label>Password<input type="password" autocomplete="current-password" required value="correct-horse"></label><button type="submit">Sign in</button><output data-example-output aria-live="polite"></output></form>Variants and sizes
The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.
compactcomfortableroomy
Public API
| Contract | Value |
|---|---|
| Implementation | semantic HTML |
| Status | stable |
| License | free |
| Since | 0.3 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
native label, autocomplete, 오류 메시지와 제출 상태를 제공하고 오류 시 첫 문제 입력으로 포커스를 이동합니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->