Login Form

A complete sign-in form composed from form primitives — demonstrates how textfields, checkbox, button, and link work together in a real authentication flow.

Preview

Welcome back

Sign in to your account

Forgot password?

Sign in

Don't have an account? Sign up

Code

<lt-surface appearance="outlined" elevation="1" style="max-width: 360px; width: 100%; border-radius: 12px;">
<div style="padding: var(--lt-spacing-8); display: flex; flex-direction: column; gap: var(--lt-spacing-4);">
  <div style="text-align: center; margin-bottom: var(--lt-spacing-2);">
    <lt-text variant="h4" style="color: var(--lt-text-default);">Welcome back</lt-text>
    <lt-text variant="body-sm" style="color: var(--lt-text-subtle); margin-top: var(--lt-spacing-1);">
      Sign in to your account
    </lt-text>
  </div>
  <lt-textfield label="Email" type="email" placeholder="you@example.com"></lt-textfield>
  <lt-textfield label="Password" type="password" placeholder="••••••••"></lt-textfield>
  <div style="display: flex; align-items: center; justify-content: space-between;">
    <lt-checkbox label="Remember me"></lt-checkbox>
    <lt-link href="/auth/reset">Forgot password?</lt-link>
  </div>
  <lt-button variant="primary" full-width>Sign in</lt-button>
  <lt-divider></lt-divider>
  <lt-text variant="body-sm" style="text-align: center; color: var(--lt-text-subtle);">
    Don't have an account? <lt-link href="/auth/register">Sign up</lt-link>
  </lt-text>
</div>
</lt-surface>

import { Surface, Text, Textfield, Checkbox, Button, Link, Divider } from '@latty-ds/react';

export default function LoginForm() {
return (
  <Surface appearance="outlined" elevation="1" style={{ maxWidth: 360, width: '100%', borderRadius: 12 }}>
    <div style={{ padding: 'var(--lt-spacing-8)', display: 'flex', flexDirection: 'column', gap: 'var(--lt-spacing-4)' }}>
      <div style={{ textAlign: 'center', marginBottom: 'var(--lt-spacing-2)' }}>
        <Text variant="h4" style={{ color: 'var(--lt-text-default)' }}>Welcome back</Text>
        <Text variant="body-sm" style={{ color: 'var(--lt-text-subtle)', marginTop: 'var(--lt-spacing-1)' }}>
          Sign in to your account
        </Text>
      </div>
      <Textfield label="Email" type="email" placeholder="you@example.com" />
      <Textfield label="Password" type="password" placeholder="••••••••" />
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <Checkbox label="Remember me" />
        <Link href="/auth/reset">Forgot password?</Link>
      </div>
      <Button variant="primary" fullWidth>Sign in</Button>
      <Divider />
      <Text variant="body-sm" style={{ textAlign: 'center', color: 'var(--lt-text-subtle)' }}>
        Don't have an account? <Link href="/auth/register">Sign up</Link>
      </Text>
    </div>
  </Surface>
);
}

<template>
<lt-surface appearance="outlined" elevation="1" style="max-width: 360px; width: 100%; border-radius: 12px;">
  <div style="padding: var(--lt-spacing-8); display: flex; flex-direction: column; gap: var(--lt-spacing-4);">
    <div style="text-align: center; margin-bottom: var(--lt-spacing-2);">
      <lt-text variant="h4" style="color: var(--lt-text-default);">Welcome back</lt-text>
      <lt-text variant="body-sm" style="color: var(--lt-text-subtle); margin-top: var(--lt-spacing-1);">
        Sign in to your account
      </lt-text>
    </div>
    <lt-textfield label="Email" type="email" placeholder="you@example.com"></lt-textfield>
    <lt-textfield label="Password" type="password" placeholder="••••••••"></lt-textfield>
    <div style="display: flex; align-items: center; justify-content: space-between;">
      <lt-checkbox label="Remember me"></lt-checkbox>
      <lt-link href="/auth/reset">Forgot password?</lt-link>
    </div>
    <lt-button variant="primary" full-width>Sign in</lt-button>
    <lt-divider></lt-divider>
    <lt-text variant="body-sm" style="text-align: center; color: var(--lt-text-subtle);">
      Don't have an account? <lt-link href="/auth/register">Sign up</lt-link>
    </lt-text>
  </div>
</lt-surface>
</template>

Components

lt-surface, lt-text, lt-textfield, lt-checkbox, lt-button, lt-link, lt-divider