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
colorScheme
Color Schemes for Input
are not implemented in the default theme. You can extend the theme to implement them.
string
errorBorderColor
errorBorderColor
The border color when the input is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"
string
focusBorderColor
focusBorderColor
The border color when the input is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"
string
htmlSize
htmlSize
The native HTML size
attribute to be passed to the input
number
isDisabled
isDisabled
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
boolean
isInvalid
isInvalid
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
boolean
isReadOnly
isReadOnly
If true
, the form control will be readonly
boolean
isRequired
isRequired
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
boolean
size
size
"lg" | "md" | "sm" | "xs"
"md"
variant
variant
"outline" | "filled" | "flushed" | "unstyled"
"outline"