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, remember me, and links.

Sign In

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 }]}
            >
              <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 validation - Required field check
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