2.1.2 • Published 6 months ago

@chakra-ui/input v2.1.2

Weekly downloads
61,326
License
MIT
Repository
github
Last release
6 months ago

Input

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

Installation

yarn add @chakra-ui/input

# or

npm i @chakra-ui/input

Import components

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

Usage

<Input placeholder="A simple input component" />

Disabled

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

<Input isDisabled placeholder="A disabled input" />

Invalid

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

<Input isInvalid placeholder="An invalid input" />

Readonly

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

<Input isReadOnly placeholder="An invalid input" />

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.

<>
  <Input size="sm" marginBottom="1rem" placeholder="A simple placeholder" />

  <Input size="md" marginBottom="1rem" placeholder="A simple placeholder" />

  <Input size="lg" placeholder="A simple placeholder" />
</>

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.

<>
  <Input variant="outline" placeholder="Outline" marginBottom="1rem" />
  <Input variant="filled" placeholder="Filled" marginBottom="1rem" />
  <Input variant="flushed" placeholder="Flushed" marginBottom="1rem" />
  <Input variant="unstyled" placeholder="Unstyled" />
</>

Input with addon

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

<>
  <InputGroup>
    <InputLeftAddon children="+234" />
    <Input borderLeftRadius="0" placeholder="Phone number..." />
  </InputGroup>

  <br />

  <InputGroup size="sm">
    <InputLeftAddon children="https://" />
    <Input borderRadius="0" placeholder="website.com" />
    <InputRightAddon children=".com" />
  </InputGroup>
</>

Input with custom element

<InputGroup>
  <InputLeftElement children={"P"} />
  <Input type="tel" placeholder="Phone number" />
</InputGroup>
2.1.2

6 months ago

2.1.1

8 months ago

2.1.0

9 months ago

2.0.22

1 year ago

2.0.21

1 year ago

2.0.20

1 year ago

2.0.16

1 year ago

2.0.19

1 year ago

2.0.17

1 year ago

2.0.18

1 year ago

2.0.15

1 year ago

2.0.13

1 year ago

2.0.14

1 year ago

2.0.12

2 years ago

2.0.11

2 years ago

2.0.10

2 years ago

2.0.9

2 years ago

2.0.3

2 years ago

2.0.2

2 years ago

2.0.5

2 years ago

2.0.4

2 years ago

2.0.7

2 years ago

2.0.6

2 years ago

2.0.8

2 years ago

2.0.1

2 years ago

2.0.0-next.2

2 years ago

2.0.0-next.3

2 years ago

2.0.0

2 years ago

1.4.6

2 years ago

1.4.5

2 years ago

2.0.0-next.0

2 years ago

2.0.0-next.1

2 years ago

1.4.4

2 years ago

1.4.3

2 years ago

1.4.2

2 years ago

1.4.1

2 years ago

1.4.0

2 years ago

1.3.5

2 years ago

1.3.4

2 years ago

1.3.3

2 years ago

1.3.2

2 years ago

1.3.1

2 years ago

1.3.0

2 years ago

1.2.12

2 years ago

1.2.11

3 years ago

1.2.10

3 years ago

1.2.9

3 years ago

1.2.9-next.0

3 years ago

1.2.8

3 years ago

1.2.7

3 years ago

1.2.6

3 years ago

1.2.5

3 years ago

1.2.4

3 years ago

1.2.3

3 years ago

1.2.2

3 years ago

1.2.1

3 years ago

1.2.0

3 years ago

1.1.4

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.0

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

1.0.0-rc.8

3 years ago

1.0.0-rc.7

4 years ago

1.0.0-rc.6

4 years ago

1.0.0-rc.5

4 years ago

1.0.0-rc.4

4 years ago

1.0.0-rc.3

4 years ago

1.0.0-rc.2

4 years ago

1.0.0-rc.1

4 years ago

1.0.0-next.7

4 years ago

1.0.0-rc.0

4 years ago

1.0.0-next.6

4 years ago

1.0.0-next.5

4 years ago

1.0.0-next.4

4 years ago

1.0.0-next.3

4 years ago

1.0.0-next.2

4 years ago

1.0.0-next.1

4 years ago

1.0.0-next.0

4 years ago