Login Form#

Recreated from Tailwind CSS example

Username 
Password 
Sign InForgot Password?
() => {
  const [username, setUsername] = useState('');
  const [usernameError, setUsernameError] = useState('');

  const [password, setPassword] = useState('');
  const [passwordError, setPasswordError] = 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] = useState('');
  const [usernameError, setUsernameError] = useState('');
  const [password, setPassword] = useState('');
  const [passwordError, setPasswordError] = 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#

Search
() => {
  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#

Small
For light background jobs like sending email.
$40/mo
Medium
For tasks like image resizing, exporting PDFs, etc.
$40/mo
Large
For intensive tasks like video encoding, etc.
$40/mo
() => {
  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 (
    <Stack>
      {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>
    ))}
  </Stack>
  )
};
() => {
  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 (
    <Stack>
      {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>
    ))}
  </Stack>
  )
};

Selecting a card item from a grid#

Small
8gb/4CPUs
160 GB SSD disk
$10/mo
Medium
8gb/4CPUs
160 GB SSD disk
$20/mo
Large
8gb/4CPUs
160 GB SSD disk
$30/mo
() => {
  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>
  );
};