Input

Input component is a component that is used to get user input in a text field. It is usually used together with a FormControl to provide an accessible label, validation messages, etc.

Import#

import { Input } from "@chakra-ui/core";

import { Input } from "@chakra-ui/core";

Usage#

Here's a basic usage of the Input component.

<Input placeholder="Basic usage" />

<Input placeholder="Basic usage" />

Editable Example

Changing the size of the Input#

There are three sizes of an Input : large (48px), default (40px) and small (32px).

<Stack spacing={3}>
  <Input placeholder="large size" size="lg" />
  <Input placeholder="default size" size="md" />
  <Input placeholder="small size" size="sm" />
</Stack>

<Stack spacing={3}>
  <Input placeholder="large size" size="lg" />
  <Input placeholder="default size" size="md" />
  <Input placeholder="small size" size="sm" />
</Stack>

Editable Example

Changing the appearance of the input#

The input component comes in 3 variants, outline, unstyled , flushed , and filled. Pass the variant prop and set it to either of these values.

<Stack spacing={3}>
  <Input variant="outline" placeholder="Outline" />
  <Input variant="filled" placeholder="Filled" />
  <Input variant="flushed" placeholder="Flushed" />
  <Input variant="unstyled" placeholder="Unstyled" />
</Stack>

<Stack spacing={3}>
  <Input variant="outline" placeholder="Outline" />
  <Input variant="filled" placeholder="Filled" />
  <Input variant="flushed" placeholder="Flushed" />
  <Input variant="unstyled" placeholder="Unstyled" />
</Stack>

Editable Example

Left and Right Addons#

Just like bootstrap, you can add addons to the left and right of the input component. Chakra UI exports InputGroup, InputLeftAddon, InputRightAddon to help with this use case.

+234

https://

.com

<Stack spacing={4}>
  <InputGroup>
    <InputLeftAddon children="+234" />
    <Input type="tel" roundedLeft="0" placeholder="phone number" />
  </InputGroup>

  {/* If you add the size prop to `InputGroup`, it'll pass it to all it's children. */}
  <InputGroup size="sm">
    <InputLeftAddon children="https://" />
    <Input rounded="0" placeholder="mysite" />
    <InputRightAddon children=".com" />
  </InputGroup>
</Stack>

<Stack spacing={4}>
  <InputGroup>
    <InputLeftAddon children="+234" />
    <Input type="tel" roundedLeft="0" placeholder="phone number" />
  </InputGroup>
  {/* If you add the size prop to `InputGroup`, it'll pass it to all it's children. */}
  <InputGroup size="sm">
    <InputLeftAddon children="https://" />
    <Input rounded="0" placeholder="mysite" />
    <InputRightAddon children=".com" />
  </InputGroup>
</Stack>

Editable Example

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.

<Stack spacing={4}>
  <InputGroup>
    <InputLeftElement children={<Icon name="phone" color="gray.300" />} />
    <Input type="phone" placeholder="Phone number" />
  </InputGroup>

  <InputGroup>
    <InputLeftElement color="gray.300" fontSize="1.2em" children="$" />
    <Input placeholder="Enter amount" />
    <InputRightElement children={<Icon name="check" color="green.500" />} />
  </InputGroup>
</Stack>

<Stack spacing={4}>
  <InputGroup>
    <InputLeftElement children={<Icon name="phone" color="gray.300" />} />
    <Input type="phone" placeholder="Phone number" />
  </InputGroup>
  <InputGroup>
    <InputLeftElement color="gray.300" fontSize="1.2em" children="$" />
    <Input placeholder="Enter amount" />
    <InputRightElement children={<Icon name="check" color="green.500" />} />
  </InputGroup>
</Stack>

Editable Example

Password Input Example#

Let's use these components to create a password input with a show/hide password functionality.

function PasswordInput() {
  const [show, setShow] = React.useState(false);
  const handleClick = () => setShow(!show);

  return (
    <InputGroup size="md">
      <Input
        pr="4.5rem"
        type={show ? "text" : "password"}
        placeholder="Enter password"
      />
      <InputRightElement width="4.5rem">
        <Button h="1.75rem" size="sm" onClick={handleClick}>
          {show ? "Hide" : "Show"}
        </Button>
      </InputRightElement>
    </InputGroup>
  );
}

function PasswordInput() {
  const [show, setShow] = React.useState(false);
  const handleClick = () => setShow(!show);
  return (
    <InputGroup size="md">
      <Input
        pr="4.5rem"
        type={show ? "text" : "password"}
        placeholder="Enter password"
      />
      <InputRightElement width="4.5rem">
        <Button h="1.75rem" size="sm" onClick={handleClick}>
          {show ? "Hide" : "Show"}
        </Button>
      </InputRightElement>
    </InputGroup>
  );
}

Editable Example

Controlled Input#

function Example() {
  const [value, setValue] = React.useState("");
  const handleChange = event => setValue(event.target.value);

  return (
    <>
      <Input
        value={value}
        onChange={handleChange}
        placeholder="Here is a sample placeholder"
        size="sm"
      />
    </>
  );
}

function Example() {
  const [value, setValue] = React.useState("");
  const handleChange = event => setValue(event.target.value);
  return (
    <>
      <Input
        value={value}
        onChange={handleChange}
        placeholder="Here is a sample placeholder"
        size="sm"
      />
    </>
  );
}

Editable Example

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.

<Stack spacing={3}>
  <Input focusBorderColor="lime" placeholder="Here is a sample placeholder" />
  <Input
    focusBorderColor="pink.400"
    placeholder="Here is a sample placeholder"
  />
  <Input
    isInvalid
    errorBorderColor="red.300"
    placeholder="Here is a sample placeholder"
  />
  <Input
    isInvalid
    errorBorderColor="crimson"
    placeholder="Here is a sample placeholder"
  />
</Stack>

<Stack spacing={3}>
  <Input focusBorderColor="lime" placeholder="Here is a sample placeholder" />
  <Input
    focusBorderColor="pink.400"
    placeholder="Here is a sample placeholder"
  />
  <Input
    isInvalid
    errorBorderColor="red.300"
    placeholder="Here is a sample placeholder"
  />
  <Input
    isInvalid
    errorBorderColor="crimson"
    placeholder="Here is a sample placeholder"
  />
</Stack>

Editable Example

Props#

The Input component composes PseudoBox so you can pass all PseudoBox props, and React.InputHTMLAttributes.

Name	Type	Default	Description
`as`	`React.ElementType`	`input`	The component to use in place of `input`.
`aria-label`	`string`		Accessibility label to use, in scenarios where the input has no visible label. A11y: It's usefult for screen readers.
`aria-describedby`	`string`		Accessibility label to use, in scenarios where the input has no visible label. A11y: It's usefult for screen readers.
`isDisabled`	`boolean`	`false`	If `true`, the input will be disabled. This sets `aria-disabled=true` and you can style this state by passing `_disabled` prop.
`isInvalid`	`boolean`	`false`	If `true`, the `input` will indicate an error. This sets `aria-invalid=true` and you can style this state by passing `_invalid` prop.
`isRequired`	`boolean`	`false`	If `true`, the input element will be required.
`isFullWidth`	`boolean`	`false`	If `true`, the input element will span the full width of it's parent.
`isReadOnly`	`boolean`	`false`	If `true`, prevents the value of the input from being edited.
`size`	`sm`, `md`, `lg`	`md`	The visual size of the `input` element.
`variant`	`outline`, `unstyled`, `flushed`, `filled`	`outline`	The variant of the input style to use.
`focusBorderColor`	`string`		The border color when the input is focused.
`errorBorderColor`	`string`		The border color when `isInvalid` is set to `true`.

Proudly made in 🇳🇬

Released under the MIT License.

Input

.css-12m0k8p{pointer-events:auto;}Import.css-18hqai{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-18hqai:focus{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Usage#

Changing the size of the Input#

Changing the appearance of the input#

Left and Right Addons#

Add elements inside input#

Password Input Example#

Controlled Input#

Changing the focus and error border colors#

Props#

Import#