Input

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

Import#

import { Input } from "@chakra-ui/core"

import { Input } from "@chakra-ui/core"

Usage#

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

<Input placeholder="Basic usage" />

<Input placeholder="Basic usage" />

Editable Example

Changing the size of the Input#

There are three sizes of an Input:

sm (24px)
md (32px)
lg (40px)

<Stack spacing={3}>
  <Input placeholder="large size" size="lg" />
  <Input placeholder="default size" size="md" />
  <Input placeholder="small size" size="sm" />
</Stack>

<Stack spacing={3}>
  <Input placeholder="large size" size="lg" />
  <Input placeholder="default size" size="md" />
  <Input placeholder="small size" size="sm" />
</Stack>

Editable Example

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>

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

Editable Example

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.

+234

https://

.com

<Stack spacing={4}>
  <InputGroup>
    <InputLeftAddon children="+234" />
    <Input type="phone" borderLeftRadius="0" placeholder="phone number" />
  </InputGroup>

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

<Stack spacing={4}>
  <InputGroup>
    <InputLeftAddon children="+234" />
    <Input type="phone" borderLeftRadius="0" placeholder="phone number" />
  </InputGroup>
  {/* If you add the size prop to `InputGroup`, it'll pass it to all it's children. */}
  <InputGroup size="sm">
    <InputLeftAddon children="https://" />
    <Input borderRadius="0" placeholder="mysite" />
    <InputRightAddon children=".com" />
  </InputGroup>
</Stack>

Editable Example

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 Users can pass pointerEvents="none" to InputLeftElement or InputRightElement to ensure that clicking on them focused the input.

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

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

<Stack spacing={4}>
  <InputGroup>
    <InputLeftElement
      pointerEvents="none"
      children={<PhoneIcon color="gray.300" />}
    />
    <Input type="phone" placeholder="Phone number" />
  </InputGroup>
  <InputGroup>
    <InputLeftElement
      pointerEvents="none"
      color="gray.300"
      fontSize="1.2em"
      children="$"
    />
    <Input placeholder="Enter amount" />
    <InputRightElement children={<CheckIcon color="green.500" />} />
  </InputGroup>
</Stack>

Editable Example

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>
  )
}

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>
  )
}

Editable Example

Controlled Input#

Value:

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"
      />
    </>
  )
}

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"
      />
    </>
  )
}

Editable Example

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>

<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>

Editable Example

Props#

The Input component composes Box so you can pass all Box props, and React.InputHTMLAttributes.

Name	Type	Default	Description
`as`	`React.ElementType`	`input`	The component to use in place of `input`.
`aria-label`	`string`		Accessibility label to use, in scenarios where the input has no visible label. A11y: It's usefult for screen readers.
`aria-describedby`	`string`		Accessibility label to use, in scenarios where the input has no visible label. A11y: It's usefult for screen readers.
`isDisabled`	`boolean`	`false`	If `true`, the input will be disabled. This sets `aria-disabled=true` and you can style this state by passing `_disabled` prop.
`isInvalid`	`boolean`	`false`	If `true`, the `input` will indicate an error. This sets `aria-invalid=true` and you can style this state by passing `_invalid` prop.
`isRequired`	`boolean`	`false`	If `true`, the input element will be required.
`isFullWidth`	`boolean`	`false`	If `true`, the input element will span the full width of it's parent.
`isReadOnly`	`boolean`	`false`	If `true`, prevents the value of the input from being edited.
`size`	`sm`, `md`, `lg`	`md`	The visual size of the `input` element.
`variant`	`outline`, `unstyled`, `flushed`, `filled`	`outline`	The variant of the input style to use.
`focusBorderColor`	`string`		The border color when the input is focused.
`errorBorderColor`	`string`		The border color when `isInvalid` is set to `true`.

Edit this page

Input

.css-12m0k8p{pointer-events:auto;}Import.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);}#

Usage#

Changing the size of the Input#

Changing the appearance of the input#

Left and Right Addons#

Add elements inside input#

Password Input Example#

Controlled Input#

Changing the focus and error border colors#

Props#

Import#