Input

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

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 gap={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 gap={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 Group and InputAddon to help with this use case.

<Stack gap={4}>
  <Group>
    <InputAddon>+234</InputAddon>
    <Input type='tel' placeholder='phone number' />
  </Group>

  {/* If you add the size prop to `Group`, it'll pass it to all its children. */}
  <Group size='sm'>
    <InputAddon>https://</InputAddon>
    <Input placeholder='mysite' />
    <InputAddon placement='end'>.com</InputAddon>
  </Group>
</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 gap={4}>
  <Group>
    <InputLeftElement pointerEvents='none'>
      <PhoneIcon color='gray.300' />
    </InputLeftElement>
    <Input type='tel' placeholder='Phone number' />
  </Group>

  <Group>
    <InputLeftElement pointerEvents='none' color='gray.300' fontSize='1.2em'>
      $
    </InputLeftElement>
    <Input placeholder='Enter amount' />
    <InputRightElement>
      <CheckIcon color='green.500' />
    </InputRightElement>
  </Group>
</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 (
    <Group>
      <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>
    </Group>
  )
}

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 invalid is set to true (errorBorderColor).

<Input
  placeholder='Here is a sample placeholder'
  css={{ '--focus-color': 'lime', '--error-color': 'red' }}
/>

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 gap={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>

The Input component is a multipart component. The styling needs to be applied to each part specifically.

To learn more about styling multipart components, visit the Component Style page.

Anatomy#

A: addon
B: field
C: element

Theming properties#

The properties that affect the theming of the Input component are:

variant: The visual variant of the input. Defaults to outline.
size: The size of the input. Defaults to md.

Theming utilities#

createMultiStyleConfigHelpers: a function that returns a set of utilities for creating style configs for a multipart component (definePartsStyle and defineMultiStyleConfig).
definePartsStyle: a function used to create multipart style objects.
defineMultiStyleConfig: a function used to define the style configuration for a multipart component.

import { inputAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(inputAnatomy.keys)

Customizing the default theme#

import { inputAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(inputAnatomy.keys)

const baseStyle = definePartsStyle({
  // define the part you're going to style
  field: {
    fontFamily: 'mono', // change the font family
    color: 'teal.500', // change the input text color
  },
})

export const inputTheme = defineMultiStyleConfig({ baseStyle })

After customizing the input theme, we can import it in our theme file and add it in the components property:

import { extendTheme } from '@chakra-ui/react'
import { inputTheme } from './components/input.ts'

export const theme = extendTheme({
  components: { Input: inputTheme },
})

This is a crucial step to make sure that any changes that we make to the input theme are applied.

Adding a custom size#

Let's assume we want to include an extra large input size. Here's how we can do that:

import { inputAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(inputAnatomy.keys)

const xl = defineStyle({
  fontSize: 'lg',
  px: '4',
  h: '12',
})

const sizes = {
  xl: definePartsStyle({ field: xl, addon: xl }),
}

export const inputTheme = defineMultiStyleConfig({ sizes })

// Now we can use the new `xl` size
<Input size="xl" ... />

Every time you're adding anything new to the theme, you'd need to run the CLI command to get proper autocomplete in your IDE. You can learn more about the CLI tool here.

Adding a custom variant#

Let's assume we want to include a custom pill variant. Here's how we can do that:

import { inputAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(inputAnatomy.keys)

const pill = definePartsStyle({
  field: {
    border: '1px solid',
    borderColor: 'gray.200',
    background: 'gray.50',
    borderRadius: 'full',

    // Let's also provide dark mode alternatives
    _dark: {
      borderColor: 'gray.600',
      background: 'gray.800',
    },
  },
  addon: {
    border: '1px solid',
    borderColor: 'gray.200',
    background: 'gray.200',
    borderRadius: 'full',
    color: 'gray.500',

    _dark: {
      borderColor: 'gray.600',
      background: 'gray.600',
      color: 'gray.400',
    },
  },
})

export const inputTheme = defineMultiStyleConfig({
  variants: { pill },
})

// Now we can use the new `pill` variant
<Input variant="pill" ... />

Changing the default properties#

Let's assume we want to change the default size and variant of every input in our app. Here's how we can do that:

import { inputAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'

const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(
  inputAnatomy.keys,
)

export const inputTheme = defineMultiStyleConfig({
  defaultProps: {
    size: 'xl',
    variant: 'pill',
  },
})

// This saves you time, instead of manually setting the size and variant every time you use an input:
<Input size="xl" variant="pill" ... />

Showcase#

import { Box, SimpleGrid, GridItem, Icon, IconButton, Input, InputGroup, InputLeftAddon, InputRightElement, useColorMode } from "@chakra-ui/react";
import { FaMoon, FaSun, FaPhone } from "react-icons/fa";

export default function App() {
  const { toggleColorMode, colorMode } = useColorMode();
  return (
    <Box position="relative" h="100vh">
      <SimpleGrid gap={12} p={12} columns={2}>
        <Input placeholder="Themed Outline Input" />
        <Input placeholder="Themed Filled Input" variant="filled" />
        <GridItem colSpan={2}>
          <InputGroup variant="custom" colorScheme="purple">
            <InputLeftAddon>Phone:</InputLeftAddon>
            <Input placeholder="Themed Custom Input" />
            <InputRightElement pointerEvents="none">
              <Icon as={FaPhone} color="green.400" />
            </InputRightElement>
          </InputGroup>
        </GridItem>
      </SimpleGrid>

      <IconButton
        aria-label="toggle theme"
        rounded="full"
        size="xs"
        position="absolute"
        bottom={4}
        left={4}
        onClick={toggleColorMode} icon={colorMode === "dark" ? <FaSun /> : <FaMoon />}
      />
    </Box>
  );
}

Open Sandbox

Edit this page on GitHub