Forms
Simple Sign in
import { useState } from 'react';
import {
Container,
FormControl,
FormLabel,
Input,
Stack,
Button,
Heading,
useColorModeValue,
VStack,
Center,
InputGroup,
InputRightElement,
Checkbox,
Link
} from '@chakra-ui/react';
const SimpleSignIn = () => {
const [show, setShow] = useState(false);
const handleClick = () => setShow(!show);
return (
<Container maxW="7xl" p={{ base: 5, md: 10 }}>
<Center>
<Stack spacing={4}>
<Stack align="center">
<Heading fontSize="2xl">Sign in to your account</Heading>
</Stack>
<VStack
as="form"
boxSize={{ base: 'xs', sm: 'sm', md: 'md' }}
h="max-content !important"
bg={useColorModeValue('white', 'gray.700')}
rounded="lg"
boxShadow="lg"
p={{ base: 5, sm: 10 }}
spacing={8}
>
<VStack spacing={4} w="100%">
<FormControl id="email">
<FormLabel>Email</FormLabel>
<Input rounded="md" type="email" />
</FormControl>
<FormControl id="password">
<FormLabel>Password</FormLabel>
<InputGroup size="md">
<Input rounded="md" type={show ? 'text' : 'password'} />
<InputRightElement width="4.5rem">
<Button
h="1.75rem"
size="sm"
rounded="md"
bg={useColorModeValue('gray.300', 'gray.700')}
_hover={{
bg: useColorModeValue('gray.400', 'gray.800')
}}
onClick={handleClick}
>
{show ? 'Hide' : 'Show'}
</Button>
</InputRightElement>
</InputGroup>
</FormControl>
</VStack>
<VStack w="100%">
<Stack direction="row" justifyContent="space-between" w="100%">
<Checkbox colorScheme="green" size="md">
Remember me
</Checkbox>
<Link fontSize={{ base: 'md', sm: 'md' }}>Forgot password?</Link>
</Stack>
<Button
bg="green.300"
color="white"
_hover={{
bg: 'green.500'
}}
rounded="md"
w="100%"
>
Sign in
</Button>
</VStack>
</VStack>
</Stack>
</Center>
</Container>
);
};
export default SimpleSignIn;
Sign in with no labels
import * as React from 'react';
import {
Container,
FormControl,
Input,
Stack,
Button,
Heading,
VStack,
Center,
Checkbox,
Link
} from '@chakra-ui/react';
// Here we have used react-icons package for the icon
import { BiLockAlt } from 'react-icons/bi';
const SignInForm = () => {
return (
<Container maxW="7xl" p={{ base: 5, md: 10 }}>
<Center>
<Stack spacing={4}>
<Stack align="center">
<Heading fontSize="3xl">Sign in to your account</Heading>
</Stack>
<VStack as="form" spacing={8} w={{ base: 'sm', sm: 'lg' }} p={{ base: 5, sm: 6 }}>
<VStack spacing={0} w="100%">
<FormControl id="email">
<Input
type="email"
placeholder="Email Address"
rounded="md"
borderBottomLeftRadius="0"
borderBottomRightRadius="0"
/>
</FormControl>
<FormControl id="password" position="relative" bottom="1px">
<Input
type="password"
placeholder="Password"
rounded="md"
borderTopLeftRadius="0"
borderTopRightRadius="0"
/>
</FormControl>
</VStack>
<VStack w="100%">
<Stack direction="row" justifyContent="space-between" w="100%">
<Checkbox colorScheme="green" size="md">
Remember me
</Checkbox>
<Link fontSize={{ base: 'md', sm: 'md' }}>Forgot password?</Link>
</Stack>
<Button
leftIcon={<BiLockAlt />}
bg="green.300"
color="white"
_hover={{
bg: 'green.500'
}}
rounded="md"
w="100%"
>
Sign in
</Button>
</VStack>
</VStack>
</Stack>
</Center>
</Container>
);
};
export default SignInForm;
Magic link
import * as React from 'react';
import {
Container,
Box,
FormLabel,
FormControl,
Input,
Stack,
Button,
Heading,
VStack,
Text,
useColorModeValue
} from '@chakra-ui/react';
const MagicLinkForm = () => {
return (
<Container maxW="5xl" p={{ base: 5, md: 10 }}>
<Stack spacing={4} maxW={{ base: '20rem', sm: '25rem' }} margin="0 auto">
<Stack align="center" spacing={2}>
<Heading fontSize={{ base: 'xl', sm: '3xl' }}>Sign in to your account</Heading>
<Text fontSize={{ base: 'sm', sm: 'md' }}>Send a magic link with your email below</Text>
</Stack>
<Box pos="relative">
<Box
pos="absolute"
top="-7px"
right="-7px"
bottom="-7px"
left="-7px"
rounded="lg"
bgGradient="linear(to-l, #7928CA,#FF0080)"
transform="rotate(-2deg)"
></Box>
<VStack
as="form"
pos="relative"
spacing={8}
p={6}
bg={useColorModeValue('white', 'gray.700')}
rounded="lg"
boxShadow="lg"
>
<FormControl id="email">
<FormLabel>Email address</FormLabel>
<Input type="email" placeholder="Your email" rounded="md" />
</FormControl>
<Button
bg="blue.400"
color="white"
_hover={{
bg: 'blue.500'
}}
rounded="md"
w="100%"
>
Send magic link
</Button>
</VStack>
</Box>
</Stack>
</Container>
);
};
export default MagicLinkForm;
Split with image
import * as React from 'react';
import {
FormControl,
FormLabel,
Input,
Stack,
Button,
Heading,
useColorModeValue,
VStack,
Checkbox,
Link,
Image,
Flex
} from '@chakra-ui/react';
const SplitWithImage = () => {
return (
<Stack minH="100vh" direction={{ base: 'column-reverse', md: 'row' }}>
<Flex flex={1}>
<Image alt="Cover image" objectFit="cover" src="https://bit.ly/2k1H1t6" />
</Flex>
<Flex p={8} flex={1} align="center" justifyContent="center">
<Stack spacing={4}>
<Stack align="center">
<Heading fontSize="2xl">Sign in to your account</Heading>
</Stack>
<VStack
as="form"
spacing={8}
boxSize={{ base: 'xs', sm: 'sm', md: 'md' }}
h="max-content !important"
bg={useColorModeValue('white', 'gray.700')}
rounded="lg"
boxShadow="lg"
p={{ base: 5, sm: 10 }}
>
<VStack spacing={4} w="100%">
<FormControl id="email">
<FormLabel>Email</FormLabel>
<Input rounded="md" type="email" />
</FormControl>
<FormControl id="password">
<FormLabel>Password</FormLabel>
<Input rounded="md" type="password" />
</FormControl>
</VStack>
<VStack w="100%">
<Stack direction="row" justifyContent="space-between" w="100%">
<Checkbox colorScheme="green" size="md">
Remember me
</Checkbox>
<Link fontSize={{ base: 'md', sm: 'md' }}>Forgot password?</Link>
</Stack>
<Button
bg="green.300"
color="white"
_hover={{
bg: 'green.500'
}}
rounded="md"
w="100%"
>
Sign in
</Button>
</VStack>
</VStack>
</Stack>
</Flex>
</Stack>
);
};
export default SplitWithImage;
Contact Us
import { Fragment } from 'react';
import {
Container,
FormControl,
FormLabel,
Input,
Textarea,
Stack,
Button,
Heading,
useColorModeValue,
VStack,
Flex,
Text,
Icon,
Divider
} from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { GoLocation } from 'react-icons/go';
import { BsPhone } from 'react-icons/bs';
import { HiOutlineMail } from 'react-icons/hi';
const contactOptions = [
{
label: 'Address',
value: 'A108 Adam Street, NY 535022, USA',
icon: GoLocation
},
{
label: 'PHONE NUMBER',
value: '+1 5589 55488 55',
icon: BsPhone
},
{
label: 'EMAIL',
value: 'info@example.com',
icon: HiOutlineMail
}
];
const Contact = () => {
return (
<Container maxW="7xl" py={10} px={{ base: 5, md: 8 }}>
<Stack spacing={10}>
<Flex align="center" justifyContent="center" direction="column">
<Heading fontSize="4xl" mb={2}>
Contact Us
</Heading>
<Text fontSize="md" textAlign="center">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
</Text>
</Flex>
<Stack
spacing={{ base: 6, md: 0 }}
direction={{ base: 'column', md: 'row' }}
justifyContent="space-between"
>
{contactOptions.map((option, index) => (
<Fragment key={index}>
<Stack
spacing={3}
direction="column"
justifyContent="center"
alignItems="center"
px={3}
>
<Icon as={option.icon} w={10} h={10} color="green.400" />
<Text fontSize="lg" fontWeight="semibold">
{option.label}
</Text>
<Text fontSize="md" textAlign="center">
{option.value}
</Text>
</Stack>
{contactOptions.length - 1 !== index && (
<Flex d={{ base: 'none', md: 'flex' }}>
<Divider orientation="vertical" />
</Flex>
)}
</Fragment>
))}
</Stack>
<VStack
as="form"
spacing={8}
w="100%"
bg={useColorModeValue('white', 'gray.700')}
rounded="lg"
boxShadow="lg"
p={{ base: 5, sm: 10 }}
>
<VStack spacing={4} w="100%">
<Stack w="100%" spacing={3} direction={{ base: 'column', md: 'row' }}>
<FormControl id="name">
<FormLabel>Name</FormLabel>
<Input type="text" placeholder="Ahmad" rounded="md" />
</FormControl>
<FormControl id="email">
<FormLabel>Email</FormLabel>
<Input type="email" placeholder="test@test.com" rounded="md" />
</FormControl>
</Stack>
<FormControl id="subject">
<FormLabel>Subject</FormLabel>
<Input type="text" placeholder="Are you available for freelance work?" rounded="md" />
</FormControl>
<FormControl id="message">
<FormLabel>Message</FormLabel>
<Textarea size="lg" placeholder="Enter your message" rounded="md" />
</FormControl>
</VStack>
<VStack w="100%">
<Button
bg="green.300"
color="white"
_hover={{
bg: 'green.500'
}}
rounded="md"
w={{ base: '100%', md: 'max-content' }}
>
Send Message
</Button>
</VStack>
</VStack>
</Stack>
</Container>
);
};
export default Contact;
Booking A Place
import {
Container,
Box,
Heading,
Flex,
FormControl,
FormLabel,
Input,
Select
} from '@chakra-ui/react';
const BookingForm = () => {
return (
<Container maxW="5xl" p={{ base: 5, md: 10 }}>
<Heading as="h3" size="lg" mb="4" fontWeight="bold" textAlign="left">
Book unique homes and experiences
</Heading>
<Box as="form" mb={{ base: '2.5rem', lg: '4rem' }}>
<Flex
justifyContent="start"
alignItems="start"
flexDirection={{ base: 'column', lg: 'row' }}
>
<FormControl
id="where"
width={{ base: '100%', lg: 1 / 3 }}
pr={{ lg: '2' }}
mb={{ base: '4', lg: '0' }}
>
<FormLabel fontSize="0.75rem" fontWeight="bold">
Where
</FormLabel>
<Input placeholder="Anywhere" />
</FormControl>
<FormControl
id="checkIn"
width={{ base: '100%', lg: 1 / 3 }}
pr={{ lg: '2' }}
mb={{ base: '4', lg: '0' }}
>
<FormLabel fontSize="0.75rem" fontWeight="bold">
CHECK-IN - CHECKOUT
</FormLabel>
<Input placeholder="mm/dd/yyyy - mm/dd/yyyy" />
</FormControl>
<FormControl
id="guests"
width={{ base: '100%', lg: 1 / 3 }}
pr={{ lg: '2' }}
mb={{ base: '4', lg: '0' }}
>
<FormLabel fontSize="0.75rem" fontWeight="bold">
GUESTS
</FormLabel>
<Select>
<option value="1 guest">1 guest</option>
<option value="2 guest">2 guests</option>
<option value="3 guest">3 guests</option>
</Select>
</FormControl>
</Flex>
</Box>
</Container>
);
};
export default BookingForm;
