A Login Form component in Ant Design is a user interface element used to collect and validate user credentials for accessing a secure digital system or application.
import React from "react";
import { Button, Checkbox, Form, Grid, Input, theme, Typography } from "antd";
import { LockOutlined, MailOutlined } from "@ant-design/icons";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text, Title, Link } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const onFinish = (values) => {
console.log("Received values of form: ", values);
};
const styles = {
container: {
margin: "0 auto",
padding: screens.md ? `${token.paddingXL}px` : `${token.sizeXXL}px ${token.padding}px`,
width: "380px"
},
footer: {
marginTop: token.marginLG,
textAlign: "center",
width: "100%"
},
forgotPassword: {
float: "right"
},
header: {
marginBottom: token.marginXL
},
section: {
alignItems: "center",
backgroundColor: token.colorBgContainer,
display: "flex",
height: screens.sm ? "100vh" : "auto",
padding: screens.md ? `${token.sizeXXL}px 0px` : "0px"
},
text: {
color: token.colorTextSecondary
},
title: {
fontSize: screens.md ? token.fontSizeHeading2 : token.fontSizeHeading3
}
};
return (
<section style={styles.section}>
<div style={styles.container}>
<div style={styles.header}>
<svg
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="0.464294" width="24" height="24" rx="4.8" fill="#1890FF" />
<path
d="M14.8643 3.6001H20.8643V9.6001H14.8643V3.6001Z"
fill="white"
/>
<path
d="M10.0643 9.6001H14.8643V14.4001H10.0643V9.6001Z"
fill="white"
/>
<path
d="M4.06427 13.2001H11.2643V20.4001H4.06427V13.2001Z"
fill="white"
/>
</svg>
<Title style={styles.title}>Sign in</Title>
<Text style={styles.text}>
Welcome back to AntBlocks UI! Please enter your details below to
sign in.
</Text>
</div>
<Form
name="normal_login"
initialValues={{
remember: true,
}}
onFinish={onFinish}
layout="vertical"
requiredMark="optional"
>
<Form.Item
name="email"
rules={[
{
type: "email",
required: true,
message: "Please input your Email!",
},
]}
>
<Input
prefix={<MailOutlined />}
placeholder="Email"
/>
</Form.Item>
<Form.Item
name="password"
rules={[
{
required: true,
message: "Please input your Password!",
},
]}
>
<Input.Password
prefix={<LockOutlined />}
type="password"
placeholder="Password"
/>
</Form.Item>
<Form.Item>
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox>Remember me</Checkbox>
</Form.Item>
<a style={styles.forgotPassword} href="">
Forgot password?
</a>
</Form.Item>
<Form.Item style={{ marginBottom: "0px" }}>
<Button block="true" type="primary" htmlType="submit">
Log in
</Button>
<div style={styles.footer}>
<Text style={styles.text}>Don't have an account?</Text>{" "}
<Link href="">Sign up now</Link>
</div>
</Form.Item>
</Form>
</div>
</section>
);
}
import React from "react";
import { Button, Checkbox, Col, Form, Grid, Input, Row, theme, Typography } from "antd";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text, Title, Link } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const onFinish = (values) => {
console.log("Received values of form: ", values);
};
const styles = {
container: {
alignItems: "center",
backgroundColor: token.colorBgContainer,
display: "flex",
justifyContent: "center",
padding: screens.md ? `${token.sizeXXL * 2}px ${token.paddingLG}px` : `${token.sizeXXL}px ${token.padding}px`
},
footer: {
marginTop: token.marginLG,
textAlign: "center",
width: "100%"
},
forgotPassword: {
float: "right"
},
formHeader: {
marginBottom: token.marginXL,
textAlign: "center"
},
formWrapper: {
maxWidth: "320px"
},
image: {
height: "100%",
objectFit: "cover",
position: "absolute",
width: "100%",
zIndex: "10"
},
imageWrapper: {
display: screens.md ? "block" : "none",
height: "100%",
position: "relative"
},
text: {
color: token.colorTextSecondary
},
title: {
fontSize: screens.md ? token.fontSizeHeading2 : token.fontSizeHeading3
}
};
return (
<Row>
<Col span={screens.md ? 10 : 24}>
<div style={styles.container}>
<div style={styles.formWrapper}>
<div style={styles.formHeader}>
<svg
width="32"
height="32"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0.464294"
width="24"
height="24"
rx="4.8"
fill="#1890FF"
/>
<path
d="M14.8643 3.6001H20.8643V9.6001H14.8643V3.6001Z"
fill="white"
/>
<path
d="M10.0643 9.6001H14.8643V14.4001H10.0643V9.6001Z"
fill="white"
/>
<path
d="M4.06427 13.2001H11.2643V20.4001H4.06427V13.2001Z"
fill="white"
/>
</svg>
<Title style={styles.title}>Sign in</Title>
<Text style={styles.text}>
Welcome back to AntBlocks UI! Please enter your details below to
sign in.
</Text>
</div>
<Form
name="normal_login"
initialValues={{
remember: true,
}}
onFinish={onFinish}
layout="vertical"
requiredMark="optional"
>
<Form.Item
label="Username"
name="username"
rules={[
{
required: true,
message: "Please input your Username!",
},
]}
>
<Input
prefix={<UserOutlined />}
placeholder="Username"
label="asd"
/>
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[
{
required: true,
message: "Please input your Password!",
},
]}
>
<Input.Password
prefix={<LockOutlined />}
type="password"
placeholder="Password"
/>
</Form.Item>
<Form.Item>
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox>Remember me</Checkbox>
</Form.Item>
<a style={styles.forgotPassword} href="">
Forgot password?
</a>
</Form.Item>
<Form.Item style={{ marginBottom: "0px" }}>
<Button block="true" type="primary" htmlType="submit">
Log in
</Button>
<div style={styles.footer}>
<Text style={styles.text}>Don't have an account?</Text>{" "}
<Link underline href="">Sign up now</Link>
</div>
</Form.Item>
</Form>
</div>
</div>
</Col>
<Col span={14}>
<div style={styles.imageWrapper}>
<img
style={styles.image}
alt="Example"
src="https://images.unsplash.com/photo-1534239697798-120952b76f2b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1280&q=80"
/>
</div>
</Col>
</Row>
);
}
import React from "react";
import { Button, Checkbox, Form, Grid, Input, theme, Typography } from "antd";
import { LockOutlined, MailOutlined } from "@ant-design/icons";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text, Title, Link } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const onFinish = (values) => {
console.log("Received values of form: ", values);
};
const styles = {
footer: {
marginTop: token.marginLG,
textAlign: "center",
width: "100%"
},
forgotPassword: {
float: "right"
},
header: {
marginBottom: token.marginXL,
textAlign: "center"
},
panel: {
backgroundColor: token.colorBgContainer,
borderRadius: screens.md ? token.borderRadiusLG : "0",
boxShadow: screens.md ? token.boxShadowTertiary : "none",
margin: "0 auto",
padding: screens.md ? `${token.paddingXL}px` : `${token.sizeXXL}px ${token.padding}px`,
width: "360px"
},
section: {
alignItems: "center",
backgroundColor: screens.md ? token.colorBgLayout : token.colorBgContainer,
display: "flex",
height: screens.md ? "100vh" : "auto",
padding: screens.md ? `${token.sizeXXL}px 0px` : "0px"
},
text: {
color: token.colorTextSecondary
},
title: {
fontSize: screens.md ? token.fontSizeHeading2 : token.fontSizeHeading3
}
};
return (
<section style={styles.section}>
<div style={styles.panel}>
<div style={styles.header}>
<svg
width="33"
height="32"
viewBox="0 0 33 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="0.125" width="32" height="32" rx="6.4" fill="#1890FF" />
<path
d="M19.3251 4.80005H27.3251V12.8H19.3251V4.80005Z"
fill="white"
/>
<path d="M12.925 12.8H19.3251V19.2H12.925V12.8Z" fill="white" />
<path d="M4.92505 17.6H14.525V27.2001H4.92505V17.6Z" fill="white" />
</svg>
<Title style={styles.title}>Sign in</Title>
<Text style={styles.text}>
Welcome back to AntBlocks UI! Please enter your details below to
sign in.
</Text>
</div>
<Form
name="normal_login"
initialValues={{
remember: true,
}}
onFinish={onFinish}
layout="vertical"
requiredMark="optional"
>
<Form.Item
label="Email"
name="email"
rules={[
{
type: "email",
required: true,
message: "Please input your Email!",
},
]}
>
<Input prefix={<MailOutlined />} placeholder="Email" />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[
{
required: true,
message: "Please input your Password!",
},
]}
>
<Input.Password
prefix={<LockOutlined />}
type="password"
placeholder="Password"
/>
</Form.Item>
<Form.Item>
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox>Remember me</Checkbox>
</Form.Item>
<a style={styles.forgotPassword} href="">
Forgot password?
</a>
</Form.Item>
<Form.Item style={{ marginBottom: "0px" }}>
<Button block="true" type="primary" htmlType="submit">
Log in
</Button>
<div style={styles.footer}>
<Text style={styles.text}>Don't have an account?</Text>{" "}
<Link underline href="">Sign up now</Link>
</div>
</Form.Item>
</Form>
</div>
</section>
);
}
import React from "react";
import { Button, Form, Grid, Input, theme, Typography } from "antd";
import { LockOutlined } from "@ant-design/icons";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text, Title } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const onFinish = (values) => {
console.log("Received values of form: ", values);
};
const styles = {
formWrapper: {
margin: "0 auto",
maxWidth: "320px",
padding: `${token.sizeXXL}px ${token.padding}px`,
width: "100%"
},
header: {
marginBottom: token.marginXL,
textAlign: "center"
},
section: {
alignItems: "center",
backgroundColor: token.colorBgContainer,
display: "flex"
},
text: {
color: token.colorTextSecondary
},
title: {
fontSize: screens.md ? token.fontSizeHeading2 : token.fontSizeHeading3
}
};
return (
<section style={styles.section}>
<div style={styles.formWrapper}>
<div style={styles.header}>
<svg
width="32"
height="32"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="0.464294" width="24" height="24" rx="4.8" fill="#1890FF" />
<path
d="M14.8643 3.6001H20.8643V9.6001H14.8643V3.6001Z"
fill="white"
/>
<path
d="M10.0643 9.6001H14.8643V14.4001H10.0643V9.6001Z"
fill="white"
/>
<path
d="M4.06427 13.2001H11.2643V20.4001H4.06427V13.2001Z"
fill="white"
/>
</svg>
<Title style={styles.title}>Set new password</Title>
<Text style={styles.text}>
Please enter your new password below.
</Text>
</div>
<Form
name="set_new_password"
onFinish={onFinish}
layout="vertical"
requiredMark="optional"
>
<Form.Item
name="password"
rules={[
{
required: true,
message: "Please input your new password!",
},
]}
>
<Input.Password
prefix={<LockOutlined />}
type="password"
placeholder="New Password"
/>
</Form.Item>
<Form.Item
name="confirmPassword"
rules={[
{
required: true,
message: "Please confirm your new password!",
},
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue("password") === value) {
return Promise.resolve();
}
return Promise.reject(
new Error("The two passwords do not match!")
);
},
}),
]}
>
<Input.Password
prefix={<LockOutlined />}
type="password"
placeholder="Confirm New Password"
/>
</Form.Item>
<Form.Item style={{ marginBottom: "0px" }}>
<Button block type="primary" htmlType="submit">
Reset password
</Button>
</Form.Item>
</Form>
</div>
</section>
);
}
import React from "react";
import { Button, Form, Grid, Input, theme, Typography } from "antd";
import { MailOutlined } from "@ant-design/icons";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text, Title, Link } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const onFinish = (values) => {
console.log("Received values of form: ", values);
};
const styles = {
footer: {
marginTop: token.marginLG,
textAlign: "center",
width: "100%"
},
formWrapper: {
margin: "0 auto",
maxWidth: "320px",
padding: `${token.sizeXXL}px ${token.padding}px`,
width: "100%"
},
header: {
marginBottom: token.marginXL,
textAlign: "center"
},
section: {
alignItems: "center",
backgroundColor: token.colorBgContainer,
display: "flex"
},
text: {
color: token.colorTextSecondary
},
title: {
fontSize: screens.md ? token.fontSizeHeading2 : token.fontSizeHeading3
}
};
return (
<section style={styles.section}>
<div style={styles.formWrapper}>
<div style={styles.header}>
<svg
width="32"
height="32"
viewBox="0 0 33 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="0.125" width="32" height="32" rx="6.4" fill="#1890FF" />
<path
d="M19.3251 4.80005H27.3251V12.8H19.3251V4.80005Z"
fill="white"
/>
<path d="M12.925 12.8H19.3251V19.2H12.925V12.8Z" fill="white" />
<path d="M4.92505 17.6H14.525V27.2001H4.92505V17.6Z" fill="white" />
</svg>
<Title style={styles.title}>Forgot password?</Title>
<Text style={styles.text}>
Enter your email address to receive a password reset link.
</Text>
</div>
<Form
name="forgot_password"
onFinish={onFinish}
layout="vertical"
requiredMark="optional"
>
<Form.Item
name="email"
rules={[
{
type: "email",
required: true,
message: "Please input your Email!",
},
]}
>
<Input prefix={<MailOutlined />} placeholder="Email" />
</Form.Item>
<Form.Item style={{ marginBottom: "0px" }}>
<Button block type="primary" htmlType="submit">
Reset Password
</Button>
</Form.Item>
<div style={styles.footer}>
<Text style={styles.text}>Remember your password?</Text>{" "}
<Link underline href="">Log in</Link>
</div>
</Form>
</div>
</section>
);
}
import React from "react";
import { Button, Divider, Form, Grid, Input, Space, theme, Typography } from "antd";
import { AppleFilled, GithubOutlined, MailOutlined } from "@ant-design/icons";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text, Title, Link } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const onFinish = (values) => {
console.log("Received values of form: ", values);
};
const styles = {
footer: {
marginTop: token.marginLG,
textAlign: "center",
width: "100%"
},
forgotPassword: {
float: "right"
},
formWrapper: {
margin: "0 auto",
maxWidth: "320px",
padding: `${token.sizeXXL}px ${token.padding}px`
},
header: {
marginBottom: token.marginXL,
textAlign: "center"
},
section: {
backgroundColor: token.colorBgContainer
},
social: {
display: "flex",
flexDirection: "column",
gap: token.marginXS
},
text: {
color: token.colorTextSecondary
},
title: {
fontSize: screens.md ? token.fontSizeHeading2 : token.fontSizeHeading3
}
};
return (
<section style={styles.section}>
<div style={styles.formWrapper}>
<div style={styles.header}>
<svg
width="32"
height="32"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="0.464294" width="24" height="24" rx="4.8" fill="#1890FF" />
<path
d="M14.8643 3.6001H20.8643V9.6001H14.8643V3.6001Z"
fill="white"
/>
<path
d="M10.0643 9.6001H14.8643V14.4001H10.0643V9.6001Z"
fill="white"
/>
<path
d="M4.06427 13.2001H11.2643V20.4001H4.06427V13.2001Z"
fill="white"
/>
</svg>
<Title style={styles.title}>Sign in</Title>
<Text style={styles.text}>
Welcome back to AntBlocks UI! Please enter your details below to
sign in.
</Text>
</div>
<Form
name="normal_login"
initialValues={{
remember: true,
}}
onFinish={onFinish}
layout="vertical"
requiredMark="optional"
>
<Form.Item
name="email"
rules={[
{
required: true,
type: "email",
message: "Please input your Email!",
},
]}
>
<Input
prefix={<MailOutlined />}
placeholder="Enter your Email"
label="Email"
/>
</Form.Item>
<Form.Item style={{ marginBottom: "0px" }}>
<Button block="true" type="primary" htmlType="submit">
Continue with email
</Button>
</Form.Item>
</Form>
<Divider plain>OR</Divider>
<div style={styles.social}>
<Button icon={<GithubOutlined />}>Continue with Github</Button>
<Button icon={<AppleFilled />}>Continue with Apple</Button>
</div>
<div style={styles.footer}>
<Text style={styles.text}>Don't have an account?</Text>{" "}
<Link href="">Sign up now</Link>
</div>
</div>
</section>
);
}
