Form Layouts
<Boxbg="#edf3f8"_dark={{bg: "#111",}}p={10}><Box><SimpleGriddisplay={{base: "initial",md: "grid",}}columns={{md: 3,}}spacing={{md: 6,}}><GridItemcolSpan={{md: 1,}}><Box px={[4, 0]}><Heading fontSize="lg" fontWeight="md" lineHeight="6">Profile</Heading><Textmt={1}fontSize="sm"color="gray.600"_dark={{color: "gray.400",}}>This information will be displayed publicly so be careful what youshare.</Text></Box></GridItem><GridItemmt={[5, null, 0]}colSpan={{md: 2,}}><chakra.formmethod="POST"shadow="base"rounded={[null, "md"]}overflow={{sm: "hidden",}}><Stackpx={4}py={5}bg="white"_dark={{bg: "#141517",}}spacing={6}p={{sm: 6,}}><SimpleGrid columns={3} spacing={6}><FormControl as={GridItem} colSpan={[3, 2]}><FormLabelfontSize="sm"fontWeight="md"color="gray.700"_dark={{color: "gray.50",}}>Website</FormLabel><InputGroup size="sm"><InputLeftAddonbg="gray.50"_dark={{bg: "gray.800",}}color="gray.500"rounded="md">http://</InputLeftAddon><Inputtype="tel"placeholder="www.example.com"focusBorderColor="brand.400"rounded="md"/></InputGroup></FormControl></SimpleGrid><div><FormControl id="email" mt={1}><FormLabelfontSize="sm"fontWeight="md"color="gray.700"_dark={{color: "gray.50",}}>About</FormLabel><Textareaplaceholder="you@example.com"mt={1}rows={3}shadow="sm"focusBorderColor="brand.400"fontSize={{sm: "sm",}}/><FormHelperText>Brief description for your profile. URLs are hyperlinked.</FormHelperText></FormControl></div><FormControl><FormLabelfontSize="sm"fontWeight="md"color="gray.700"_dark={{color: "gray.50",}}>Photo</FormLabel><Flex alignItems="center" mt={1}><AvatarboxSize={12}bg="gray.100"_dark={{bg: "gray.800",}}icon={<Iconas={FaUser}boxSize={9}mt={3}rounded="full"color="gray.300"_dark={{color: "gray.700",}}/>}/><Buttontype="button"ml={5}variant="outline"size="sm"fontWeight="medium"_focus={{shadow: "none",}}>Change</Button></Flex></FormControl><FormControl><FormLabelfontSize="sm"fontWeight="md"color="gray.700"_dark={{color: "gray.50",}}>Cover photo</FormLabel><Flexmt={1}justify="center"px={6}pt={5}pb={6}borderWidth={2}_dark={{color: "gray.500",}}borderStyle="dashed"rounded="md"><Stack spacing={1} textAlign="center"><Iconmx="auto"boxSize={12}color="gray.400"_dark={{color: "gray.500",}}stroke="currentColor"fill="none"viewBox="0 0 48 48"aria-hidden="true"><pathd="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/></Icon><FlexfontSize="sm"color="gray.600"_dark={{color: "gray.400",}}alignItems="baseline"><chakra.labelhtmlFor="file-upload"cursor="pointer"rounded="md"fontSize="md"color="brand.600"_dark={{color: "brand.200",}}pos="relative"_hover={{color: "brand.400",_dark: {color: "brand.300",},}}><span>Upload a file</span><VisuallyHidden><inputid="file-upload"name="file-upload"type="file"/></VisuallyHidden></chakra.label><Text pl={1}>or drag and drop</Text></Flex><TextfontSize="xs"color="gray.500"_dark={{color: "gray.50",}}>PNG, JPG, GIF up to 10MB</Text></Stack></Flex></FormControl></Stack><Boxpx={{base: 4,sm: 6,}}py={3}bg="gray.50"_dark={{bg: "#121212",}}textAlign="right"><Buttontype="submit"colorScheme="brand"_focus={{shadow: "",}}fontWeight="md">Save</Button></Box></chakra.form></GridItem></SimpleGrid></Box><Dividermy="5"borderColor="gray.300"_dark={{borderColor: "whiteAlpha.300",}}visibility={{base: "hidden",sm: "visible",}}/><Box mt={[10, 0]}><SimpleGriddisplay={{base: "initial",md: "grid",}}columns={{md: 3,}}spacing={{md: 6,}}><GridItemcolSpan={{md: 1,}}><Box px={[4, 0]}><Heading fontSize="lg" fontWeight="medium" lineHeight="6">Personal Information</Heading><Textmt={1}fontSize="sm"color="gray.600"_dark={{color: "gray.400",}}>Use a permanent address where you can receive mail.</Text></Box></GridItem><GridItemmt={[5, null, 0]}colSpan={{md: 2,}}><chakra.formmethod="POST"shadow="base"rounded={[null, "md"]}overflow={{sm: "hidden",}}><Stackpx={4}py={5}p={[null, 6]}bg="white"_dark={{bg: "#141517",}}spacing={6}><SimpleGrid columns={6} spacing={6}><FormControl as={GridItem} colSpan={[6, 3]}><FormLabelhtmlFor="first_name"fontSize="sm"fontWeight="md"color="gray.700"_dark={{color: "gray.50",}}>First name</FormLabel><Inputtype="text"name="first_name"id="first_name"autoComplete="given-name"mt={1}focusBorderColor="brand.400"shadow="sm"size="sm"w="full"rounded="md"/></FormControl><FormControl as={GridItem} colSpan={[6, 3]}><FormLabelhtmlFor="last_name"fontSize="sm"fontWeight="md"color="gray.700"_dark={{color: "gray.50",}}>Last name</FormLabel><Inputtype="text"name="last_name"id="last_name"autoComplete="family-name"mt={1}focusBorderColor="brand.400"shadow="sm"size="sm"w="full"rounded="md"/></FormControl><FormControl as={GridItem} colSpan={[6, 4]}><FormLabelhtmlFor="email_address"fontSize="sm"fontWeight="md"color="gray.700"_dark={{color: "gray.50",}}>Email address</FormLabel><Inputtype="text"name="email_address"id="email_address"autoComplete="email"mt={1}focusBorderColor="brand.400"shadow="sm"size="sm"w="full"rounded="md"/></FormControl><FormControl as={GridItem} colSpan={[6, 3]}><FormLabelhtmlFor="country"fontSize="sm"fontWeight="md"color="gray.700"_dark={{color: "gray.50",}}>Country / Region</FormLabel><Selectid="country"name="country"autoComplete="country"placeholder="Select option"mt={1}focusBorderColor="brand.400"shadow="sm"size="sm"w="full"rounded="md"><option>United States</option><option>Canada</option><option>Mexico</option></Select></FormControl><FormControl as={GridItem} colSpan={6}><FormLabelhtmlFor="street_address"fontSize="sm"fontWeight="md"color="gray.700"_dark={{color: "gray.50",}}>Street address</FormLabel><Inputtype="text"name="street_address"id="street_address"autoComplete="street-address"mt={1}focusBorderColor="brand.400"shadow="sm"size="sm"w="full"rounded="md"/></FormControl><FormControl as={GridItem} colSpan={[6, 6, null, 2]}><FormLabelhtmlFor="city"fontSize="sm"fontWeight="md"color="gray.700"_dark={{color: "gray.50",}}>City</FormLabel><Inputtype="text"name="city"id="city"autoComplete="city"mt={1}focusBorderColor="brand.400"shadow="sm"size="sm"w="full"rounded="md"/></FormControl><FormControl as={GridItem} colSpan={[6, 3, null, 2]}><FormLabelhtmlFor="state"fontSize="sm"fontWeight="md"color="gray.700"_dark={{color: "gray.50",}}>State / Province</FormLabel><Inputtype="text"name="state"id="state"autoComplete="state"mt={1}focusBorderColor="brand.400"shadow="sm"size="sm"w="full"rounded="md"/></FormControl><FormControl as={GridItem} colSpan={[6, 3, null, 2]}><FormLabelhtmlFor="postal_code"fontSize="sm"fontWeight="md"color="gray.700"_dark={{color: "gray.50",}}>ZIP / Postal</FormLabel><Inputtype="text"name="postal_code"id="postal_code"autoComplete="postal-code"mt={1}focusBorderColor="brand.400"shadow="sm"size="sm"w="full"rounded="md"/></FormControl></SimpleGrid></Stack><Boxpx={{base: 4,sm: 6,}}py={3}bg="gray.50"_dark={{bg: "#121212",}}textAlign="right"><Buttontype="submit"colorScheme="brand"_focus={{shadow: "",}}fontWeight="md">Save</Button></Box></chakra.form></GridItem></SimpleGrid></Box><Dividermy="5"borderColor="gray.300"_dark={{borderColor: "whiteAlpha.300",}}visibility={{base: "hidden",sm: "visible",}}/><Box mt={[10, 0]}><SimpleGriddisplay={{base: "initial",md: "grid",}}columns={{md: 3,}}spacing={{md: 6,}}><GridItemcolSpan={{md: 1,}}><Box px={[4, 0]}><Heading fontSize="lg" fontWeight="medium" lineHeight="6">Notifications</Heading><Textmt={1}fontSize="sm"color="gray.600"_dark={{color: "gray.400",}}>Decide which communications you'd like to receive and how.</Text></Box></GridItem><GridItemmt={[5, null, 0]}colSpan={{md: 2,}}><chakra.formmethod="POST"shadow="base"rounded={[null, "md"]}overflow={{sm: "hidden",}}><Stackpx={4}py={5}p={[null, 6]}bg="white"_dark={{bg: "#141517",}}spacing={6}><chakra.fieldset><Boxas="legend"fontSize="md"color="gray.900"_dark={{color: "gray.50",}}>By Email</Box><Stack mt={4} spacing={4}><Flex alignItems="start"><Flex alignItems="center" h={5}><CheckboxcolorScheme="brand"borderColor="brand.700"_dark={{borderColor: "gray.50",}}id="comments"rounded="md"/></Flex><Box ml={3} fontSize="sm"><chakra.labelhtmlFor="comments"fontWeight="md"color="gray.700"_dark={{color: "gray.50",}}>Comments</chakra.label><Textcolor="gray.500"_dark={{color: "gray.400",}}>Get notified when someones posts a comment on a posting.</Text></Box></Flex><Flex alignItems="start"><Flex alignItems="center" h={5}><CheckboxcolorScheme="brand"borderColor="brand.700"_dark={{borderColor: "gray.50",}}id="candidates"rounded="md"/></Flex><Box ml={3} fontSize="sm"><chakra.labelhtmlFor="candidates"fontWeight="md"color="gray.700"_dark={{color: "gray.50",}}>Candidates</chakra.label><Textcolor="gray.500"_dark={{color: "gray.400",}}>Get notified when a candidate applies for a job.</Text></Box></Flex><Flex alignItems="start"><Flex alignItems="center" h={5}><CheckboxcolorScheme="brand"borderColor="brand.700"_dark={{borderColor: "gray.50",}}id="offers"rounded="md"/></Flex><Box ml={3} fontSize="sm"><chakra.labelhtmlFor="offers"fontWeight="md"color="gray.700"_dark={{color: "gray.50",}}>Offers</chakra.label><Textcolor="gray.500"_dark={{color: "gray.400",}}>Get notified when a candidate accepts or rejects an offer.</Text></Box></Flex></Stack></chakra.fieldset><chakra.fieldset><Boxas="legend"fontSize="md"color="gray.900"_dark={{color: "gray.50",}}>Push Notifications<TextfontSize="sm"color="gray.500"_dark={{color: "gray.400",}}>These are delivered via SMS to your mobile phone.</Text></Box><RadioGroupfontSize="sm"color="gray.700"_dark={{color: "gray.50",borderColor: "gray.50",}}colorScheme="brand"mt={4}defaultValue="1"borderColor="brand.700"><Stack spacing={4}><Radio spacing={3} value="1">Everything</Radio><Radio spacing={3} value="2">Same as email</Radio><Radio spacing={3} value="3">No push notifications</Radio></Stack></RadioGroup></chakra.fieldset></Stack><Boxpx={{base: 4,sm: 6,}}py={3}bg="gray.50"_dark={{bg: "#121212",}}textAlign="right"><Buttontype="submit"colorScheme="brand"_focus={{shadow: "",}}fontWeight="md">Save</Button></Box></chakra.form></GridItem></SimpleGrid></Box></Box>;
Proudly developed in by Anuoluwapo Abraham