Input

Input component is a component that is used to get user input in a text field. It is usually used together with a

Form Control to provide an accessible label, validation messages, etc.

This component extends the
Chakra UI Input

import { Input } from '@chakra-ui/react';

import { Input } from '@chakra-ui/react';

Default#

<Input placeholder='Basic usage' />

<Input placeholder='Basic usage' />

Editable Example

Left Icon#

<Stack spacing={4}>
    <InputGroup>
        <InputLeftElement
            pointerEvents='none'
            children={<SearchIcon color='hue-green.300' />}
        />
        <Input type='phone' placeholder='Search Employees' />
    </InputGroup>

    <InputGroup>
        <InputLeftElement
            pointerEvents='none'
            color='hue-green.300'
            fontSize='1.2em'
            children='$'
        />
        <Input placeholder='Enter amount' />
        <InputRightElement children={<CheckIcon color='hue-green.500' />} />
    </InputGroup>
</Stack>

<Stack spacing={4}>
    <InputGroup>
        <InputLeftElement
            pointerEvents='none'
            children={<SearchIcon color='hue-green.300' />}
        />
        <Input type='phone' placeholder='Search Employees' />
    </InputGroup>
    <InputGroup>
        <InputLeftElement
            pointerEvents='none'
            color='hue-green.300'
            fontSize='1.2em'
            children='$'
        />
        <Input placeholder='Enter amount' />
        <InputRightElement children={<CheckIcon color='hue-green.500' />} />
    </InputGroup>
</Stack>

Editable Example

Password Input Example#

function PasswordInput() {
    const [show, setShow] = React.useState(false);
    const handleClick = () => setShow(!show);

    return (
        <InputGroup size='md'>
            <Input
                pr='4.5rem'
                type={show ? 'text' : 'password'}
                placeholder='Enter password'
            />
            <InputRightElement width='4.5rem'>
                <IconButton
                    variant='ghost'
                    onClick={handleClick}
                    icon={show ? <ViewOffIcon /> : <ViewIcon />}
                />
            </InputRightElement>
        </InputGroup>
    );
}

function PasswordInput() {
    const [show, setShow] = React.useState(false);
    const handleClick = () => setShow(!show);
    return (
        <InputGroup size='md'>
            <Input
                pr='4.5rem'
                type={show ? 'text' : 'password'}
                placeholder='Enter password'
            />
            <InputRightElement width='4.5rem'>
                <IconButton
                    variant='ghost'
                    onClick={handleClick}
                    icon={show ? <ViewOffIcon /> : <ViewIcon />}
                />
            </InputRightElement>
        </InputGroup>
    );
}

Editable Example

Button + Icon Example#

<Stack justify='center' align='center'>
    <InputGroup width='sm' overflow='hidden'>
        <InputLeftElement
            pointerEvents='none'
            color='hue-green.300'
            fontSize='1.2em'
            children={<EmailIcon color='hue-green.500' />}
        />
        <Input placeholder='Enter Email' />
        <InputRightElement
            width='fit-content'
            px='0px'
            children={<Button variant='solid-sharp'>Submit</Button>}
        />
    </InputGroup>
</Stack>

<Stack justify='center' align='center'>
    <InputGroup width='sm' overflow='hidden'>
        <InputLeftElement
            pointerEvents='none'
            color='hue-green.300'
            fontSize='1.2em'
            children={<EmailIcon color='hue-green.500' />}
        />
        <Input placeholder='Enter Email' />
        <InputRightElement
            width='fit-content'
            px='0px'
            children={<Button variant='solid-sharp'>Submit</Button>}
        />
    </InputGroup>
</Stack>

Editable Example

Error State Example#

<Stack justify='center' align='center'>
    <InputGroup width='sm' overflow='hidden'>
        <InputLeftElement
            pointerEvents='none'
            color='hue-green.300'
            fontSize='1.2em'
            children={<EmailIcon color='hue-green.500' />}
        />
        <Input
            placeholder='Enter Email'
            isInvalid
            errorBorderColor='red.300'
            placeholder='Please input ypur email'
        />
        <InputRightElement
            width='fit-content'
            px='0px'
            children={<Button variant='solid-sharp'>Submit</Button>}
        />
    </InputGroup>
</Stack>

<Stack justify='center' align='center'>
    <InputGroup width='sm' overflow='hidden'>
        <InputLeftElement
            pointerEvents='none'
            color='hue-green.300'
            fontSize='1.2em'
            children={<EmailIcon color='hue-green.500' />}
        />
        <Input
            placeholder='Enter Email'
            isInvalid
            errorBorderColor='red.300'
            placeholder='Please input ypur email'
        />
        <InputRightElement
            width='fit-content'
            px='0px'
            children={<Button variant='solid-sharp'>Submit</Button>}
        />
    </InputGroup>
</Stack>

Editable Example

Input

.css-12m0k8p{pointer-events:auto;}Default.css-1l2j62r{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-1l2j62r:focus,.css-1l2j62r[data-focus]{opacity:1;box-shadow:0 0 0 3px rgba(66, 153, 225, 0.6);}#

Left Icon#

Password Input Example#

Button + Icon Example#

Error State Example#

Default#