Nirvana Playing Madonna

    @chakra-ui/input
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.8 • Public • Published

    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>

    Install

    npm i @chakra-ui/input

    DownloadsWeekly Downloads

    315,345

    Version

    2.0.8

    License

    MIT

    Unpacked Size

    25.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • timkolberger
    • segunadebayo
    • _codebender828