Input

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

Installation

``sh
yarn add @chakra-ui/input

or

npm i @chakra-ui/input
`

Import components

`jsx
import {
Input,
InputGroup,
InputAddon,
InputLeftAddon,
InputRightAddon,
InputElement,
InputLeftElement,
InputRightElement,
} from "@chakra-ui/input"
`

Usage

`jsx

`

Disabled

Pass the isDisabled prop to have the input in the disabled state.

`jsx

`

Invalid

Pass the isInvalid prop to have the input in the invalid state.

`jsx

`

Readonly

Pass the isReadOnly prop to have the input in the read-only state.

`jsx

`

Sizes

Pass the size prop to change the size of the input. Chakra UI input size
values are: sm, md and lg. The size of the input component is md by
default.

`jsx
<>




`

Variant

Pass the variant prop to change the visual appearance of the input component.
Chakra UI input variant types are: outline, filled, flushed and
unstyled.

`jsx
<>





`

Input with addon

Prepend or append an element, generally a label or a button to the input
component.

`jsx
<>











`

Input with custom element

`jsx




``