name: "Login Form"
short_description: A sign-in form with social providers, email/password, and remember me.
long_visual_description: >
  A card with the title/subtitle, social provider buttons, a divider, email/password fields
  with a forgot link, remember-me, a sign-in button, and a sign-up link.

use_cases:
  - Sign-in page.
  - Login form.
  - Auth screen.
  - Account login.
  - App sign-in.

recommended_for:
  - An email/password sign-in with social options.
avoid_for:
  - A registration form (use signup-form).

markets:
  - Global

example_usage: >
  Show social providers above the email/password form; offer forgot-password and sign-up
  links.

props:
  title: The form title.
  subtitle: The subtitle.
  providers: The social providers.
  cta_label: The sign-in button text.
  signup_label: The sign-up link text.

example_prompts:
  - "Add a sign-in form with social login and remember me."
  - "Add a login screen."

lifecycle: experimental
content_model: A sign-in form with social and password options.

theming:
  tokens_used:
    - --color-surface
    - --color-surface-raised
    - --color-on-surface
    - --color-on-surface-muted
    - --color-primary
    - --color-primary-contrast
    - --color-border
    - --color-ring
    - --radius-card
    - --radius-control
    - --radius-button
    - --shadow-card
    - --font-heading
    - --space-section
    - --duration-token

editorial_guidance: >
  Offer the login methods your users have; keep forgot-password and sign-up easy to find.

categorization:
  category: Auth
  subcategory: Login
  atomic_type: organism
  usage_type: [form]
  maturity: ai-generated
  wcag:
    level: AA
    notes: Uses a real h1; fields have labels; social/submit are real buttons; forgot/sign-up are real links.
  keyboard_support: All fields and controls are focusable and keyboard-operable.
  seo_score: 40
  text_direction: both