2.1.2 • Published 2 years ago

@chakra-ui/input v2.1.2

Weekly downloads
61,326
License
MIT
Repository
github
Last release
2 years 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

2 years ago

2.1.1

2 years ago

2.1.0

2 years ago

2.0.22

2 years ago

2.0.21

2 years ago

2.0.20

2 years ago

2.0.16

2 years ago

2.0.19

2 years ago

2.0.17

2 years ago

2.0.18

2 years ago

2.0.15

2 years ago

2.0.13

3 years ago

2.0.14

3 years ago

2.0.12

3 years ago

2.0.11

3 years ago

2.0.10

3 years ago

2.0.9

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.5

3 years ago

2.0.4

3 years ago

2.0.7

3 years ago

2.0.6

3 years ago

2.0.8

3 years ago

2.0.1

3 years ago

2.0.0-next.2

3 years ago

2.0.0-next.3

3 years ago

2.0.0

3 years ago

1.4.6

3 years ago

1.4.5

3 years ago

2.0.0-next.0

3 years ago

2.0.0-next.1

3 years ago

1.4.4

3 years ago

1.4.3

3 years ago

1.4.2

3 years ago

1.4.1

3 years ago

1.4.0

3 years ago

1.3.5

3 years ago

1.3.4

3 years ago

1.3.3

3 years ago

1.3.2

4 years ago

1.3.1

4 years ago

1.3.0

4 years ago

1.2.12

4 years ago

1.2.11

4 years ago

1.2.10

4 years ago

1.2.9

4 years ago

1.2.9-next.0

4 years ago

1.2.8

4 years ago

1.2.7

4 years ago

1.2.6

4 years ago

1.2.5

4 years ago

1.2.4

4 years ago

1.2.3

4 years ago

1.2.2

4 years ago

1.2.1

4 years ago

1.2.0

4 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.0

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

1.0.0-rc.8

5 years ago

1.0.0-rc.7

5 years ago

1.0.0-rc.6

5 years ago

1.0.0-rc.5

5 years ago

1.0.0-rc.4

5 years ago

1.0.0-rc.3

5 years ago

1.0.0-rc.2

5 years ago

1.0.0-rc.1

5 years ago

1.0.0-next.7

5 years ago

1.0.0-rc.0

5 years ago

1.0.0-next.6

5 years ago

1.0.0-next.5

5 years ago

1.0.0-next.4

5 years ago

1.0.0-next.3

5 years ago

1.0.0-next.2

5 years ago

1.0.0-next.1

5 years ago

1.0.0-next.0

5 years ago