apps/www/content/docs/components/input.mdx
import { Input } from "@chakra-ui/react"
<Input />
Use the variant prop to change the visual style of the input.
Use the size prop to change the size of the input.
Pair the input with the Field component to add helper text.
Pair the input with the Field component to add error text.
Compose the input with the Field component to add a label, helper text, and
error text.
Here's an example of how to integrate the input with react-hook-form.
Use the startElement and endElement on the InputGroup component to add an
element to the start and end of the input.
Use the InputAddon and Group components to add an addon to the input.
Use the disabled prop to disable the input.
Use the Group component to attach a button to the input.
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.
Use the _placeholder prop to style the placeholder text.
Here's an example of how to build a floating label to the input.
<ExampleTabs name="input-with-floating-label" />Here's an example of using the use-mask-input library to mask the input shape.
Here's an example of how to add a character counter to the input.
<ExampleTabs name="input-with-character-counter" />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.
<ExampleTabs name="input-with-card-details" />Combine the Input and CloseButton components to create a clear button. This
is useful for building search inputs.