Input

Usage

import { Input } from "chakra-ui-solid";

<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.

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.

Character Counter

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

Clear Button

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

Props