Skip to main content

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:

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)

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.

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.

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.

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.

Password Input Example

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

Controlled Input

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.

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.

Input Methods other than Text

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

Date and Time Picker

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

Props

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

colorScheme

Description

Color Schemes for Input are not implemented in the default theme. You can extend the theme to implement them.

Type
string

errorBorderColor

Description

The border color when the input is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"

Type
string

focusBorderColor

Description

The border color when the input is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"

Type
string

htmlSize

Description

The native HTML size attribute to be passed to the input

Type
number

isDisabled

Description

If 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

Type
boolean

isInvalid

Description

If 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

Type
boolean

isReadOnly

Description

If true, the form control will be readonly

Type
boolean

isRequired

Description

If 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

Type
boolean

size

Type
"lg" | "md" | "sm" | "xs"
Default
"md"

variant

Type
"outline" | "filled" | "flushed" | "unstyled"
Default
"outline"