Input

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

Editable Example

Changing the size of the Input#

There are three sizes of an Input:

  • sm (24px)
  • md (32px)
  • lg (40px)
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.

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

$
Editable Example

Password Input Example#

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

Editable Example

Controlled Input#

Value:

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.

Editable Example

Props#

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

NameTypeDescriptionDefault
colorSchemestring-
errorBorderColorstringThe border color when the input is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"-
focusBorderColorstringThe border color when the input is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"-
isDisabledbooleanIf `true`, the form control will be disabled. This has 2 side effects: - The `FormLabel` will have `data-disabled` attribute - The form element (e.g, Input) will be disabled-
isFullWidthbooleanIf `true`, the input element will span the full width of its parent-
isInvalidbooleanIf `true`, the form control will be invalid. This has 2 side effects: - The `FormLabel` and `FormErrorIcon` will have `data-invalid` set to `true` - The form element (e.g, Input) will have `aria-invalid` set to `true`-
isReadOnlybooleanIf `true`, the form control will be readonly-
isRequiredbooleanIf `true`, the form control will be required. This has 2 side effects: - The `FormLabel` will show a required indicator - The form element (e.g, Input) will have `aria-required` set to `true`-
sizestring-
variantstring-
Edit this page