Input

Input component is a component that is used to get user input in a text field.

    SourceTheme source@chakra-ui/input

Import#

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

Usage#

Here's a basic usage example of the Input component:

<Input placeholder='Basic usage' />

Changing the size of the Input#

The Input component comes in four sizes. The default is md.

  • xs (24px)
  • sm (32px)
  • md (40px)
  • lg (48px)
<Stack spacing={3}>
  <Input placeholder='extra small size' size='xs' />
  <Input placeholder='small size' size='sm' />
  <Input placeholder='medium size' size='md' />
  <Input placeholder='large size' size='lg' />
</Stack>

If you want to use the native DOM size attribute you can use the htmlSize prop. For it to work as expected you will also need to provide the width prop set to auto.

<Input htmlSize={4} width='auto' />

Changing the appearance of the input#

The input component comes in 4 variants: outline, unstyled, flushed, and filled. Pass the variant prop and set it to one of these values.

<Stack spacing={3}>
  <Input variant='outline' placeholder='Outline' />
  <Input variant='filled' placeholder='Filled' />
  <Input variant='flushed' placeholder='Flushed' />
  <Input variant='unstyled' placeholder='Unstyled' />
</Stack>

Left and Right Addons#

Like bootstrap, you can add addons to the left and right of the Input component. Chakra UI exports InputGroup, InputLeftAddon, and InputRightAddon to help with this use case.

<Stack spacing={4}>
  <InputGroup>
    <InputLeftAddon children='+234' />
    <Input type='tel' placeholder='phone number' />
  </InputGroup>


  {/* If you add the size prop to `InputGroup`, it'll pass it to all its children. */}
  <InputGroup size='sm'>
    <InputLeftAddon children='https://' />
    <Input placeholder='mysite' />
    <InputRightAddon children='.com' />
  </InputGroup>
</Stack>

Add elements inside Input#

In some scenarios, you might need to add an icon or button inside the input component. Chakra UI exports InputLeftElement and InputRightElement to help with this use case.

If the left or right is an icon or text, you can pass pointerEvents="none" to InputLeftElement or InputRightElement to ensure that clicking on them focused the input.

<Stack spacing={4}>
  <InputGroup>
    <InputLeftElement pointerEvents='none'>
      <PhoneIcon color='gray.300' />
    </InputLeftElement>
    <Input type='tel' placeholder='Phone number' />
  </InputGroup>


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

Password Input Example#

Let's use these components to create a password input with a show/hide password functionality:

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'>
        <Button h='1.75rem' size='sm' onClick={handleClick}>
          {show ? 'Hide' : 'Show'}
        </Button>
      </InputRightElement>
    </InputGroup>
  )
}

Controlled Input#

function Example() {
  const [value, setValue] = React.useState('')
  const handleChange = (event) => setValue(event.target.value)


  return (
    <>
      <Text mb='8px'>Value: {value}</Text>
      <Input
        value={value}
        onChange={handleChange}
        placeholder='Here is a sample placeholder'
        size='sm'
      />
    </>
  )
}

Changing the focus and error border colors#

You can change the border color that shows when the input receives focus (focusBorderColor) and when isInvalid is set to true (errorBorderColor). The value can be set to a color in the theme object, like teal.400, or a raw CSS value.

<Stack spacing={3}>
  <Input focusBorderColor='lime' placeholder='Here is a sample placeholder' />
  <Input
    focusBorderColor='pink.400'
    placeholder='Here is a sample placeholder'
  />
  <Input
    isInvalid
    errorBorderColor='red.300'
    placeholder='Here is a sample placeholder'
  />
  <Input
    isInvalid
    errorBorderColor='crimson'
    placeholder='Here is a sample placeholder'
  />
</Stack>

Styling the placeholder#

The placeholder of an input can be styled by using the _placeholder prop. Per default the placeholder has an opacity of 0.6, so it can be necessary to set the opacity to 1 if you want the placeholder to have a specific color.

<Stack spacing={3}>
  <Input placeholder='default placeholder' />
  <Input
    placeholder='custom placeholder'
    _placeholder={{ opacity: 1, color: 'gray.500' }}
  />
  <Input
    color='teal'
    placeholder='custom placeholder'
    _placeholder={{ color: 'inherit' }}
  />
  <Input
    color='tomato'
    placeholder='custom placeholder'
    _placeholder={{ opacity: 0.4, color: 'inherit' }}
  />
</Stack>

Input Methods other than Text#

You can use different types with Input such as dateTime, color, search, file etc.

Date and Time Picker

<Input
 placeholder="Select Date and Time"
 size="md"
 type="datetime-local"
/>

Check for different input types available : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types

Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel