Login Form

Recreated from Tailwind CSS example

Preview

Username

Password

Forgot Password?

Source

() => { const [username, setUsername] = React.useState(''); const [usernameError, setUsernameError] = React.useState(''); const [password, setPassword] = React.useState(''); const [passwordError, setPasswordError] = React.useState(''); return ( <Flex bg="gray.200" py="40px" justifyContent="center" alignItems="center"> <Box as="form" bg="white" p="32px" pt="24px" width="100%" maxWidth="20rem" boxShadow="base" borderRadius="md" > <InputField label="Username" errorText={usernameError} fontWeight="700" fontSize="14px" color="gray.700" mb={4} > <Input placeholder="Username" value={username} mb={3} onChange={e => { setUsernameError(''); setUsername(e.target.value); }} onBlur={ !username ? () => setUsernameError('Please enter a username.') : null } /> </InputField> <InputField label="Password" errorText={passwordError} fontWeight="700" fontSize="14px" color="gray.700" mb={6} > <Input type="password" placeholder="Password" value={password} mb={3} onChange={e => { setPasswordError(''); setPassword(e.target.value); }} onBlur={ !password ? () => setPasswordError('Please enter a password.') : null } /> </InputField> <Flex alignItems="center" justifyContent="space-between"> <Button color="#fff" lineHeight="1.7" fontWeight="700" fontSize="16px" onClick={e => e.preventDefault()} backgroundColor="purple.700" borderWidth={0} _hover={{ backgroundColor: 'purple.900', }} > Sign In </Button> <Link href="#" color="purple.700" fontWeight="700" _hover={{ color: 'purple.900', }} > Forgot Password? </Link> </Flex> </Box> </Flex> ); }

() => {
  const [username, setUsername] = React.useState('');
  const [usernameError, setUsernameError] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [passwordError, setPasswordError] = React.useState('');
  return (
    <Flex bg="gray.200" py="40px" justifyContent="center" alignItems="center">
      <Box
        as="form"
        bg="white"
        p="32px"
        pt="24px"
        width="100%"
        maxWidth="20rem"
        boxShadow="base"
        borderRadius="md"
      >
        <InputField
          label="Username"
          errorText={usernameError}
          fontWeight="700"
          fontSize="14px"
          color="gray.700"
          mb={4}
        >
          <Input
            placeholder="Username"
            value={username}
            mb={3}
            onChange={e => {
              setUsernameError('');
              setUsername(e.target.value);
            }}
            onBlur={
              !username
                ? () => setUsernameError('Please enter a username.')
                : null
            }
          />
        </InputField>
        <InputField
          label="Password"
          errorText={passwordError}
          fontWeight="700"
          fontSize="14px"
          color="gray.700"
          mb={6}
        >
          <Input
            type="password"
            placeholder="Password"
            value={password}
            mb={3}
            onChange={e => {
              setPasswordError('');
              setPassword(e.target.value);
            }}
            onBlur={
              !password
                ? () => setPasswordError('Please enter a password.')
                : null
            }
          />
        </InputField>
        <Flex alignItems="center" justifyContent="space-between">
          <Button
            color="#fff"
            lineHeight="1.7"
            fontWeight="700"
            fontSize="16px"
            onClick={e => e.preventDefault()}
            backgroundColor="purple.700"
            borderWidth={0}
            _hover={{
              backgroundColor: 'purple.900',
            }}
          >
            Sign In
          </Button>
          <Link
            href="#"
            color="purple.700"
            fontWeight="700"
            _hover={{
              color: 'purple.900',
            }}
          >
            Forgot Password?
          </Link>
        </Flex>
      </Box>
    </Flex>
  );
}

Async Form

Preview

Source

() => { const [value, setValue] = useState(''); const [isLoading, setIsLoading] = useState(false); // async timeout to simulate API response const wait = (amount = 0) => new Promise(resolve => setTimeout(resolve, amount)); function handleSubmit(e) { e.preventDefault(); setIsLoading(true); // wait 1 second, simulating API call wait(1000).then(() => setIsLoading(false)); } return ( <Flex as="form" onSubmit={handleSubmit} justifyContent="center"> <Box as="fieldset" disabled={isLoading} aria-busy={isLoading} maxWidth="800px" border={0} > <Flex> <Input value={value} onChange={e => setValue(e.target.value)} radiusRight={0} borderRight={0} _disabled={{ opacity: 0.4 }} /> <Button type="submit" radiusLeft={0} isLoading={isLoading}> Search </Button> </Flex> </Box> </Flex> ); }

() => {
  const [value, setValue] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  // async timeout to simulate API response
  const wait = (amount = 0) =>
    new Promise(resolve => setTimeout(resolve, amount));
  function handleSubmit(e) {
    e.preventDefault();
    setIsLoading(true);
    // wait 1 second, simulating API call
    wait(1000).then(() => setIsLoading(false));
  }
  return (
    <Flex as="form" onSubmit={handleSubmit} justifyContent="center">
      <Box
        as="fieldset"
        disabled={isLoading}
        aria-busy={isLoading}
        maxWidth="800px"
        border={0}
      >
        <Flex>
          <Input
            value={value}
            onChange={e => setValue(e.target.value)}
            radiusRight={0}
            borderRight={0}
            _disabled={{ opacity: 0.4 }}
          />
          <Button type="submit" radiusLeft={0} isLoading={isLoading}>
            Search
          </Button>
        </Flex>
      </Box>
    </Flex>
  );
}

Card Selection Examples

Selecting an item from a list

Preview

Source

() => { const items = [ { id: 1, title: 'Small', description: 'For light background jobs like sending email.', cost: '$40', }, { id: 2, title: 'Medium', description: 'For tasks like image resizing, exporting PDFs, etc.', cost: '$40', }, { id: 3, title: 'Large', description: 'For intensive tasks like video encoding, etc.', cost: '$40', }, ]; const [selected, setSelected] = useState({}); return items.map(plan => ( <Button flexDirection="row" width="100%" borderWidth={0} borderBottomWidth={1} borderBottomStyle="solid" borderBottomColor="gray.300" pr={3} pl={3} overflow="hidden" alignItems="center" onClick={() => setSelected(plan)} > <Flex width={4} height={4} backgroundColor={selected.id === plan.id ? '#5850ec' : 'transparent'} mr={4} borderRadius={100} borderColor="#5850ec" borderWidth={1} borderStyle="solid" justifyContent="center" alignItems="center" > <Box width={1} height={1} backgroundColor={selected.id === plan.id ? '#fff' : 'transparent'} borderRadius={50} borderColor="#fff" borderWidth={1} borderStyle="solid" /> </Flex> <Flex width="100%" flexDirection="row" justifyContent="space-between" px={1} py={4} > <Flex flexDirection="column" alignItems="flex-start"> <Text fontWeight="bold" fontSize="xl" mb={1} color="gray.700"> {plan.title} </Text> <Text color="gray.400">{plan.description}</Text> </Flex> <Flex> <Text fontSize="2xl" py={2}> {plan.cost}/mo </Text> </Flex> </Flex> </Button> )); }

() => {
  const items = [
    {
      id: 1,
      title: 'Small',
      description: 'For light background jobs like sending email.',
      cost: '$40',
    },
    {
      id: 2,
      title: 'Medium',
      description: 'For tasks like image resizing, exporting PDFs, etc.',
      cost: '$40',
    },
    {
      id: 3,
      title: 'Large',
      description: 'For intensive tasks like video encoding, etc.',
      cost: '$40',
    },
  ];
  const [selected, setSelected] = useState({});
  return items.map(plan => (
    <Button
      flexDirection="row"
      width="100%"
      borderWidth={0}
      borderBottomWidth={1}
      borderBottomStyle="solid"
      borderBottomColor="gray.300"
      pr={3}
      pl={3}
      overflow="hidden"
      alignItems="center"
      onClick={() => setSelected(plan)}
    >
      <Flex
        width={4}
        height={4}
        backgroundColor={selected.id === plan.id ? '#5850ec' : 'transparent'}
        mr={4}
        borderRadius={100}
        borderColor="#5850ec"
        borderWidth={1}
        borderStyle="solid"
        justifyContent="center"
        alignItems="center"
      >
        <Box
          width={1}
          height={1}
          backgroundColor={selected.id === plan.id ? '#fff' : 'transparent'}
          borderRadius={50}
          borderColor="#fff"
          borderWidth={1}
          borderStyle="solid"
        />
      </Flex>
      <Flex
        width="100%"
        flexDirection="row"
        justifyContent="space-between"
        px={1}
        py={4}
      >
        <Flex flexDirection="column" alignItems="flex-start">
          <Text fontWeight="bold" fontSize="xl" mb={1} color="gray.700">
            {plan.title}
          </Text>
          <Text color="gray.400">{plan.description}</Text>
        </Flex>
        <Flex>
          <Text fontSize="2xl" py={2}>
            {plan.cost}/mo
          </Text>
        </Flex>
      </Flex>
    </Button>
  ));
}

Selecting a card item from a grid

Preview

Source

() => { const items = [ { id: 1, title: 'Small', cpu: '8gb/4CPUs', ssd: '160 GB SSD disk', cost: '$10', }, { id: 2, title: 'Medium', cpu: '8gb/4CPUs', ssd: '160 GB SSD disk', cost: '$20', }, { id: 3, title: 'Large', cpu: '8gb/4CPUs', ssd: '160 GB SSD disk', cost: '$30', }, ]; const [selected, setSelected] = useState({}); return ( <Flex> {items.map(plan => ( <Button width={300} flexDirection="column" borderRadius="md" overflow="hidden" alignItems="center" borderWidth={1} borderColor={selected.id === plan.id ? '#5850ec' : 'gray.300'} borderStyle="solid" onClick={() => setSelected(plan)} mx={2} px={0} py={0} > <Flex width={245} justifyContent="space-between" alignItems="center" backgroundColor={ selected.id === plan.id ? 'rgba(88, 80, 236, 0.2)' : 'transparent' } py={4} px={4} borderBottomWidth={1} borderBottomColor={selected.id === plan.id ? '#5850ec' : 'gray.300'} borderBottomStyle="solid" > <Text fontWeight="bold" fontSize="xl" mb={1} color="gray.700"> {plan.title} </Text> <Flex width={4} height={4} backgroundColor={ selected.id === plan.id ? '#5850ec' : 'transparent' } borderRadius={100} borderColor="#5850ec" borderWidth={1} borderStyle="solid" justifyContent="center" alignItems="center" > <Icon name="check" size="10px" color={selected.id === plan.id ? '#fff' : 'transparent'} /> </Flex> </Flex> <Flex flexDirection="column" px={4} py={5} width={245} alignItems="flex-start" > <Text color="gray.400" fontSize="lg" pt={1}> {plan.cpu} </Text> <Text color="gray.400" fontSize="lg" pt={1}> {plan.ssd} </Text> <Text fontSize="2xl" py={2}> {plan.cost}/mo </Text> </Flex> </Button> ))} </Flex> ); }

() => {
  const items = [
    {
      id: 1,
      title: 'Small',
      cpu: '8gb/4CPUs',
      ssd: '160 GB SSD disk',
      cost: '$10',
    },
    {
      id: 2,
      title: 'Medium',
      cpu: '8gb/4CPUs',
      ssd: '160 GB SSD disk',
      cost: '$20',
    },
    {
      id: 3,
      title: 'Large',
      cpu: '8gb/4CPUs',
      ssd: '160 GB SSD disk',
      cost: '$30',
    },
  ];
  const [selected, setSelected] = useState({});
  return (
    <Flex>
      {items.map(plan => (
        <Button
          width={300}
          flexDirection="column"
          borderRadius="md"
          overflow="hidden"
          alignItems="center"
          borderWidth={1}
          borderColor={selected.id === plan.id ? '#5850ec' : 'gray.300'}
          borderStyle="solid"
          onClick={() => setSelected(plan)}
          mx={2}
          px={0}
          py={0}
        >
          <Flex
            width={245}
            justifyContent="space-between"
            alignItems="center"
            backgroundColor={
              selected.id === plan.id ? 'rgba(88, 80, 236, 0.2)' : 'transparent'
            }
            py={4}
            px={4}
            borderBottomWidth={1}
            borderBottomColor={selected.id === plan.id ? '#5850ec' : 'gray.300'}
            borderBottomStyle="solid"
          >
            <Text fontWeight="bold" fontSize="xl" mb={1} color="gray.700">
              {plan.title}
            </Text>
            <Flex
              width={4}
              height={4}
              backgroundColor={
                selected.id === plan.id ? '#5850ec' : 'transparent'
              }
              borderRadius={100}
              borderColor="#5850ec"
              borderWidth={1}
              borderStyle="solid"
              justifyContent="center"
              alignItems="center"
            >
              <Icon
                name="check"
                size="10px"
                color={selected.id === plan.id ? '#fff' : 'transparent'}
              />
            </Flex>
          </Flex>
          <Flex
            flexDirection="column"
            px={4}
            py={5}
            width={245}
            alignItems="flex-start"
          >
            <Text color="gray.400" fontSize="lg" pt={1}>
              {plan.cpu}
            </Text>
            <Text color="gray.400" fontSize="lg" pt={1}>
              {plan.ssd}
            </Text>
            <Text fontSize="2xl" py={2}>
              {plan.cost}/mo
            </Text>
          </Flex>
        </Button>
      ))}
    </Flex>
  );
}