<Stack spacing="6">
    <FormControl>
        <FormLabel>Input</FormLabel>
        <Input />
        <FormHelperText>
            Helper text <Link>with a link at the end</Link>
        </FormHelperText>
    </FormControl>
    <FormControl>
        <FormLabel>Input with inputLeftElement</FormLabel>
        <InputGroup>
            <InputLeftElement pointerEvents="none">
                <Icon>
                    <path d={mdiInformationOutline} />
                </Icon>
            </InputLeftElement>
            <Input type="tel" />
        </InputGroup>
    </FormControl>
    <FormControl>
        <FormLabel>Input with InputLeftAddon</FormLabel>
        <InputGroup>
            <InputLeftAddon children="+234" />
            <Input />
        </InputGroup>
    </FormControl>
    <FormControl>
        <FormLabel>Select</FormLabel>
        <Select>
            <option></option>
            <option>Content</option>
            <option>Engagement</option>
            <option>Commerce</option>
        </Select>
        <FormHelperText>Helper text</FormHelperText>
    </FormControl>
    <FormControl>
        <FormLabel>Number Input</FormLabel>
        <NumberInput>
            <NumberInputField />
            <NumberInputStepper>
                <NumberIncrementStepper />
                <NumberDecrementStepper />
            </NumberInputStepper>
        </NumberInput>
        <FormHelperText>Helper text</FormHelperText>
    </FormControl>
    <FormControl>
        <FormLabel>Textarea</FormLabel>
        <Textarea />
        <FormHelperText>Helper text</FormHelperText>
    </FormControl>
    <FormControl>
        <FormLabel>Radios</FormLabel>
        <RadioGroup defaultValue="checked">
            <HStack spacing="6">
                <Radio value="checked" isDisabled>
                    Disabled
                </Radio>
                <Radio value="disabled" isDisabled>
                    Disabled
                </Radio>
                <Radio value="content">Content</Radio>
                <Radio value="engagement">Engagement</Radio>
                <Radio value="commerce">Commerce</Radio>
            </HStack>
        </RadioGroup>
        <FormHelperText>Helper text</FormHelperText>
    </FormControl>
    <FormControl>
        <FormLabel>Checkboxes</FormLabel>
        <CheckboxGroup defaultValue={['checked']}>
            <HStack spacing="6">
                <Checkbox value="checked" isDisabled>
                    Disabled
                </Checkbox>
                <Checkbox value="disabled" isDisabled>
                    Disabled
                </Checkbox>
                <Checkbox value="content">Content</Checkbox>
                <Checkbox value="engagement">Engagement</Checkbox>
                <Checkbox value="commerce">Commerce</Checkbox>
            </HStack>
        </CheckboxGroup>
        <FormHelperText>Helper text</FormHelperText>
    </FormControl>
    <FormControl>
        <FormLabel>Switch</FormLabel>
        <Switch />
        <FormHelperText>Helper text</FormHelperText>
    </FormControl>
    <FormControl isRequired isInvalid>
        <FormLabel>Input error</FormLabel>
        <Input />
        <FormHelperText>Helper text</FormHelperText>
        <FormErrorMessage>
            <FormErrorIcon />
            Required
        </FormErrorMessage>
    </FormControl>
    <FormControl isDisabled>
        <FormLabel>Input isDisabled</FormLabel>
        <Input value="You can’t edit this value" />
        <FormHelperText>Helper text</FormHelperText>
    </FormControl>
    <FormControl isReadOnly>
        <FormLabel>Input isReadOnly</FormLabel>
        <Input value="You can’t edit this value" />
        <FormHelperText>Helper text</FormHelperText>
    </FormControl>
    <FormControl>
        <FormLabel variant="small">Input sm</FormLabel>
        <Input size="sm" />
        <FormHelperText>
            This Input has the prop size="sm" enabled
        </FormHelperText>
    </FormControl>
    <FormControl>
        <FormLabel variant="small">Input sm with InputLeftAddon</FormLabel>
        <InputGroup size="sm">
            <InputLeftAddon children="+234" />
            <Input />
        </InputGroup>
    </FormControl>
    <FormControl>
        <FormLabel variant="small">Select sm</FormLabel>
        <Select size="sm">
            <option></option>
            <option>Content</option>
            <option>Engagement</option>
            <option>Commerce</option>
        </Select>
        <FormHelperText>
            This Select has the prop size="sm" enabled
        </FormHelperText>
    </FormControl>
    <FormControl>
        <FormLabel>Input color</FormLabel>
        <Input type="color" />
    </FormControl>
    <FormControl>
        <FormLabel>Input date</FormLabel>
        <Input type="date" />
    </FormControl>
    <FormControl>
        <FormLabel>Input datetime-local</FormLabel>
        <Input type="datetime-local" />
    </FormControl>
    <FormControl>
        <FormLabel>Input email</FormLabel>
        <Input type="email" />
    </FormControl>
    <FormControl>
        <FormLabel>Input file</FormLabel>
        <Input type="file" />
    </FormControl>
    <FormControl>
        <FormLabel>Input month</FormLabel>
        <Input type="month" />
    </FormControl>
    <FormControl>
        <FormLabel>Input number</FormLabel>
        <Input type="number" />
    </FormControl>
    <FormControl>
        <FormLabel>Input password</FormLabel>
        <Input type="password" />
    </FormControl>
    <FormControl>
        <FormLabel>Input search</FormLabel>
        <Input type="search" />
    </FormControl>
    <FormControl>
        <FormLabel>Input tel</FormLabel>
        <Input type="tel" />
    </FormControl>
    <FormControl>
        <FormLabel>Input time</FormLabel>
        <Input type="time" />
    </FormControl>
    <FormControl>
        <FormLabel>Input url</FormLabel>
        <Input type="url" />
    </FormControl>
    <FormControl>
        <FormLabel>Input week</FormLabel>
        <Input type="week" />
    </FormControl>
</Stack>