Login Form

A polished login form combining Card, Form, Input, Checkbox, Button, and Typography components with comprehensive validation.

Sign In Form

Complete login form with email validation, password strength rules, remember me, and links.

</>

Sign In

Email

 

Password

 

Remember me

Forgot password?

Sign In

or

Don't have an account? Sign up

import { Form, Input, Checkbox, Button, Modal, Card, Flex, Space, Divider, Typography } from 'asterui'

function App() {
  const { Link, Paragraph } = Typography
  
  const handleSubmit = (values: { email: string; password: string; remember: boolean }) => {
    Modal.success({
      title: 'Login Successful',
      content: <pre className="text-left">{JSON.stringify(values, null, 2)}</pre>,
    })
  }
  
  return (
      <Flex justify="center" align="center" minHeight="screen" className="bg-base-200 p-4">
        <Card title="Sign In" className="w-full max-w-sm">
          <Form onFinish={handleSubmit} initialValues={{ remember: false }}>
            <Form.Item name="email" label="Email" rules={[{ required: true }, { type: 'email' }]}>
              <Input className="w-full" placeholder="you@example.com" />
            </Form.Item>
            <Form.Item
              name="password"
              label="Password"
              rules={[
                { required: true },
                { min: 8, message: 'Password must be at least 8 characters' },
                { pattern: /[A-Z]/, message: 'Must contain an uppercase letter' },
                { pattern: /[a-z]/, message: 'Must contain a lowercase letter' },
                { pattern: /[0-9]/, message: 'Must contain a number' },
                { pattern: /[!@#$%^&*.?]/, message: 'Must contain a special character' },
              ]}
            >
              <Input className="w-full" type="password" placeholder="Enter your password" />
            </Form.Item>
            <Space justify="between" align="center" className="mb-4">
              <Form.Item name="remember" valuePropName="checked" inline>
                <Checkbox>Remember me</Checkbox>
              </Form.Item>
              <Link size="sm">Forgot password?</Link>
            </Space>
            <Button color="primary" htmlType="submit" shape="block">
              Sign In
            </Button>
            <Divider>or</Divider>
            <Paragraph align="center" size="sm">
              Don't have an account? <Link>Sign up</Link>
            </Paragraph>
          </Form>
        </Card>
      </Flex>
    )
}

export default App

Features

• Email validation - Built-in email format checking
• Password strength - Multiple validation rules for security
• Remember me - Checkbox with form integration
• Forgot password - Typography Link component
• Sign up CTA - Call-to-action for new users
• Visual feedback - Inline error messages

Customization Ideas

• Add social login buttons (Google, GitHub, etc.)
• Include a password visibility toggle
• Add loading state during form submission
• Implement actual authentication logic
• Add OAuth provider buttons with icons