Input

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

Import#

import { CInput } from "@chakra-ui/vue";

Usage#

Here's the basic usage of the CInput component.

Editable Example
<c-input placeholder="Basic usage" />

Changing the size of the Input#

Chakra provides three sizes of an the Input component : large (40px), default (32px) and small (24px).

Editable Example
<c-stack spacing="3">
  <c-input placeholder="large size" size="lg" />
  <c-input placeholder="default size" size="md" />
  <c-input placeholder="small size" size="sm" />
</c-stack>

Changing the appearance of the input#

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

Editable Example
<c-stack spacing="3">
  <c-input variant="outline" placeholder="Outline" />
  <c-input variant="filled" placeholder="Filled" />
  <c-input variant="flushed" placeholder="Flushed" />
  <c-input variant="unstyled" placeholder="Unstyled" />
</c-stack>

Left and Right Addons#

Chakra also allows you to add addons to the left and right of the CInput component. Chakra UI exports CInputGroup, CInputLeftAddon, CInputRightAddon to help with this use case.

+234
https://
.com
Editable Example
<c-stack spacing="4">
  <c-input-group>
    <c-input-left-addon>+234</c-input-left-addon>
    <c-input type="tel" roundedLeft="0" placeholder="phone number" />
  </c-input-group>

  <!-- If you add the size prop to `CInputGroup`, it'll pass it to all it's children. -->
  <c-input-group size="sm">
    <c-input-left-addon>https://</c-input-left-addon>
    <c-input rounded="0" placeholder="mysite" />
    <c-input-right-addon>.com</c-input-right-addon>
  </c-input-group>
</c-stack>

Add elements inside input#

In some scenarios, you might need to add an icon or button inside the input component. Chakra UI exports CInputLeftElement, and CInputRightElement to help with this use case.

¥
Editable Example
<c-stack spacing="4">
  <c-input-group>
    <c-input-left-element><c-icon name="phone" color="gray.300" /></c-input-left-element>
    <c-input type="phone" placeholder="Phone number" />
  </c-input-group>

  <c-input-group>
    <c-input-left-element color="gray.300" fontSize="1.2em">¥</c-input-left-element>
    <c-input placeholder="Enter amount" />
    <c-input-right-element><c-icon name="check" color="green.500" /></c-input-right-element>
  </c-input-group>
</c-stack>

Password Input Example#

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

Editable Example
<template>
  <c-input-group size="md">
    <c-input
      pr="4.5rem"
      :type="show ? 'text' : 'password'"
      placeholder="Enter password"
      v-model="password"
    />
    <c-input-right-element width="4.5rem">
      <c-button h="1.75rem" size="sm" @click="show = !show">
        {{ show ? 'Hide' : 'Show' }}
      </c-button>
    </c-input-right-element>
  </c-input-group>
</template>

<script>
export default {
  name: 'PasswordInput',
  data () {
    return {
      password: 'kurama<3naruto',
      show: false
    }
  }
}
</script>

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 $chakraTheme object, like green.400 or a raw CSS value.

Editable Example
<c-stack spacing="3">
  <c-input focus-border-color="lime" placeholder="Here is a sample placeholder" />
  <c-input
    focus-border-color="pink.400"
    placeholder="Here is a sample placeholder"
  />
  <c-input
    is-invalid
    error-border-color="red.300"
    placeholder="Here is a sample placeholder"
  />
  <c-input
    is-invalid
    error-border-color="crimson"
    placeholder="Here is a sample placeholder"
  />
</c-stack>

Props#

The Input component composes PseudoBox so you can pass all CPseudoBox props, and normal HTMLInput attributes.

NameTypeDefaultDescription
asHTMLElement or Vue.ComponentinputThe component to use in place of input.
aria-labelstringAccessibility label to use, in scenarios where the input has no visible label. A11y: It's usefult for screen readers.
aria-describedbystringAccessibility label to use, in scenarios where the input has no visible label. A11y: It's usefult for screen readers.
isDisabledbooleanfalseIf true, the input will be disabled. This sets aria-disabled=true and you can style this state by passing _disabled prop.
isInvalidbooleanfalseIf true, the input will indicate an error. This sets aria-invalid=true and you can style this state by passing _invalid prop.
isRequiredbooleanfalseIf true, the input element will be required.
isFullWidthbooleanfalseIf true, the input element will span the full width of it's parent.
isReadOnlybooleanfalseIf true, prevents the value of the input from being edited.
sizesm, md, lgmdThe visual size of the input element.
variantoutline, unstyled, flushed, filledoutlineThe variant of the input style to use.
focusBorderColorstringThe border color when the input is focused.
errorBorderColorstringThe border color when isInvalid is set to true.

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!