Input

Usage

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

<Input />

Examples

Variants

Use the variant prop to change the visual style of the input.

Sizes

Use the size prop to change the size of the input.

Helper Text

Pair the input with the Field component to add helper text.

Error Text

Pair the input with the Field component to add error text.

Field

Compose the input with the Field component to add a label, helper text, and error text.

Hook Form

Here's an example of how to integrate the input with react-hook-form.

Element

Use the startElement and endElement on the InputGroup component to add an element to the start and end of the input.

Start Icon

Start Text

Start and End Text

Kbd

Select

Addon

Use the InputAddon and Group components to add an addon to the input.

Start Addon

End Addon

Start and End Addon

Disabled

Use the disabled prop to disable the input.

Button

Use the Group component to attach a button to the input.

Focus and Error Color

Use the --focus-color and --error-color CSS custom properties to change the color of the input when it is focused or in an error state.

Placeholder Style

Use the _placeholder prop to style the placeholder text.

Floating Label

Here's an example of how to build a floating label to the input.

Mask

Here's an example of using the use-mask-input library to mask the input shape.

Character Counter

Here's an example of how to add a character counter to the input.

Card Number

Here's an example of using react-payment-inputs to create a card number input.

You can create a full card inputs for a card number, expiry date, and CVC.

Clear Button

Combine the Input and CloseButton components to create a clear button. This is useful for building search inputs.

Props