The Input component can be imported as follows:
outline: gives the input field a clean and modern look with a visible outline surrounding it. This variant is commonly used when you want to highlight the input field and make it stand out within the form.
filled: fills the input field with a solid color, providing a visually distinct and prominent appearance. This variant is often used when you want to emphasize the input field, particularly in scenarios where the input is of high importance or requires immediate attention.
flushed: removes the outline of the input field and positions the text directly within the container, creating a sleek and streamlined visual effect. This variant is frequently employed in scenarios where you want a more compact and integrated form design.
unstyled: removes all default styling from the input field, resulting in a minimalistic and unadorned appearance. This variant is often used when you want to apply custom styling or integrate the input seamlessly into your own design system.
Addons and Elements in the Input
InputGroup: allows you to group related elements together with an Input component, providing a cohesive and structured layout. It acts as a container for the Input component and any accompanying elements, such as buttons, icons, or additional inputs.
InputLeftAddon: used to place an add-on element on the left side of the Input component. This add-on can be an icon, a button, or any other HTML element that complements the input field. It is commonly used to provide additional context or actions related to the input. For example, you can use an InputLeftAddon to display a search icon or a currency symbol alongside a text input.
InputRightAddon: allows you to place an add-on element on the right side of the Input component. This add-on element can be used to add supplementary information or actions to the input field. For instance, you can utilize the InputRightAddon to display a button for submitting the form or to show a character count indicator.
The following example creates a controlled input field where the input value is stored in the component's state.
focusBorderColor: allows you to specify the color of the border when the input field is in focus. You can set it to any valid color value or reference a color from Chakra UI's color palette.
errorBorderColor: lets you define the color of the border when there is an error associated with the input field. Similar to focusBorderColor, you can set it to a valid color value or reference a color from the Chakra UI palette.
Customizing Placeholder Text
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3