Chakra UI Input - Horizon UI

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

Import#

import { Input } from "@chakra-ui/react"

Usage#

Here's a basic usage example of the Input component:

<Input placeholder="Basic usage" borderRadius="16px" />
<Input placeholder="Basic usage" borderRadius="16px" />

Changing the size of the Input#

The Input component comes in four sizes. The default is md.

  • xs (24px)
  • sm (32px)
  • md (40px)
  • lg (48px)
<Stack spacing={3}>
  <Input placeholder="extra small size" size="xs" borderRadius="10px" />
  <Input placeholder="small size" size="sm" borderRadius="12px" />
  <Input placeholder="medium size" size="md" borderRadius="14px" />
  <Input placeholder="large size" size="lg" borderRadius="16px" />
</Stack>
<Stack spacing={3}>
  <Input placeholder="extra small size" size="xs" borderRadius="10px" />
  <Input placeholder="small size" size="sm" borderRadius="12px" />
  <Input placeholder="medium size" size="md" borderRadius="14px" />
  <Input placeholder="large size" size="lg" borderRadius="16px" />
</Stack>

Changing the appearance of the input#

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

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

Left and Right Addons#

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

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

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.

If the left or right is an icon or text, you can pass pointerEvents="none" to InputLeftElement or InputRightElement to ensure that clicking on them focused the input.

<Stack spacing={4}>
  <InputGroup>
    <InputLeftElement
      pointerEvents="none"
      children={<PhoneIcon color="gray.300" borderRadius="16px" />}
    />
    <Input type="tel" placeholder="Phone number" borderRadius="16px" />
  </InputGroup>
  <InputGroup>
    <InputLeftElement
      pointerEvents="none"
      color="gray.300"
      fontSize="1.2em"
      children="$"
      borderRadius="16px"
    />
    <Input placeholder="Enter amount" borderRadius="16px" />
    <InputRightElement
      borderRadius="16px"
      children={<CheckIcon color="green.500" />}
    />
  </InputGroup>
</Stack>
<Stack spacing={4}>
  <InputGroup>
    <InputLeftElement
      pointerEvents="none"
      children={<PhoneIcon color="gray.300" borderRadius="16px" />}
    />
    <Input type="tel" placeholder="Phone number" borderRadius="16px" />
  </InputGroup>
  <InputGroup>
    <InputLeftElement
      pointerEvents="none"
      color="gray.300"
      fontSize="1.2em"
      children="$"
      borderRadius="16px"
    />
    <Input placeholder="Enter amount" borderRadius="16px" />
    <InputRightElement
      borderRadius="16px"
      children={<CheckIcon color="green.500" />}
    />
  </InputGroup>
</Stack>

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"
        borderRadius="16px"
      />
      <InputRightElement width="4.5rem" borderRadius="16px">
        <Button h="1.75rem" size="sm" onClick={handleClick} borderRadius="10px">
          {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"
        borderRadius="16px"
      />
      <InputRightElement width="4.5rem" borderRadius="16px">
        <Button h="1.75rem" size="sm" onClick={handleClick} borderRadius="10px">
          {show ? "Hide" : "Show"}
        </Button>
      </InputRightElement>
    </InputGroup>
  )
}

Controlled Input#

function Example() {
  const [value, setValue] = React.useState("")
  const handleChange = (event) => setValue(event.target.value)
  return (
    <>
      <Text mb="8px">Value: {value}</Text>
      <Input
        value={value}
        onChange={handleChange}
        placeholder="Here is a sample placeholder"
        size="sm"
        borderRadius="10px"
      />
    </>
  )
}
function Example() {
  const [value, setValue] = React.useState("")
  const handleChange = (event) => setValue(event.target.value)
  return (
    <>
      <Text mb="8px">Value: {value}</Text>
      <Input
        value={value}
        onChange={handleChange}
        placeholder="Here is a sample placeholder"
        size="sm"
        borderRadius="10px"
      />
    </>
  )
}

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 brand.400, or a raw CSS value.

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

Props#

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

colorScheme

Description

Color Schemes for Input are not implemented in the default theme. You can extend the theme to implement them.

Type
"brand" | "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | ... 4 more ...

errorBorderColor

Description

The border color when the input is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"

Type
string

focusBorderColor

Description

The border color when the input is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"

Type
string

isDisabled

Description

If true, the form control will be disabled. This has 2 side effects: - The FormLabel will have `data-disabled` attribute - The form element (e.g, Input) will be disabled

Type
boolean

isFullWidth

Description

If true, the input element will span the full width of its parent @deprecated This component defaults to 100% width, please use the props maxWidth or width to configure

Type
boolean

isInvalid

Description

If true, the form control will be invalid. This has 2 side effects: - The FormLabel and FormErrorIcon will have `data-invalid` set to true - The form element (e.g, Input) will have `aria-invalid` set to true

Type
boolean

isReadOnly

Description

If true, the form control will be readonly

Type
boolean

isRequired

Description

If true, the form control will be required. This has 2 side effects: - The FormLabel will show a required indicator - The form element (e.g, Input) will have `aria-required` set to true

Type
boolean

size

Type
"sm" | "md" | "lg" | "xs"
Default
"md"

variant

Type
"outline" | "unstyled" | "filled" | "flushed"
Default
"outline"

Horizon UI © 2021-2023 Copyright. All Rights Reserved.

  • Blog
  • License