Chakra-UI

I♥️Components

Input

|

Chakra Docs

|

⦾ Input fields are a key part of user interaction in web forms that allow users to enter information via a text field. Chakra UI's Input component enhances this essential element by providing a wide array of powerful features and customization options.

The Input component can be imported as follows:

Examples

Basic Usage

⦾ In just a single line of code, we can create an input field with a placeholder text.

Code

Customizing Size

⦾ Chakra's Input component provides five different sizes: 'xs', 'sm', 'md', 'lg', and the default being 'md'. These correspond to specific pixel heights for the input field (24px, 32px, 40px, 48px respectively).

Code

Variants

⦾ Chakra UI's Input component offers four distinct stylistic variants, each providing a unique visual appearance and user experience:
  • 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.

Code

Addons and Elements in the Input

⦾ Chakra UI allows adding addons and elements to the left and right of the Input component. Chakra UI also provides the InputGroup,InputLeftAddon, and InputRightAddon subcomponents to manage these addons. By utilizing these components, you can extend the functionality and visual appeal of the Input component while maintaining a coherent and structured form layout.
  • 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.
+001
http://
.org

Code

Password Input

⦾ Chakra UI offers a convenient way to create password input fields with built-in show/hide functionality, allowing users to toggle the visibility of their entered password. This feature adds an extra layer of flexibility and user control when dealing with sensitive information. In this example, 'Hide' and 'Show' are buttons used to toggle the visibility of the password typed in the input field.

Code

Controlled Input

⦾ Controlled Input refers to a technique in React where the value of an input field is controlled and managed by the state of the component. In other words, the state variable is used to keep track of the input field's value, and any changes to the input are reflected in the state, allowing for a synchronized and controlled user input experience.

The following example creates a controlled input field where the input value is stored in the component's state.

Value:

Code

Styling

⦾ Styling the Input component in Chakra UI is straightforward and offers convenient properties to customize the appearance, including the focus and error border colors. These properties allow you to ensure consistency with your application's design and provide visual cuInputyle the Input component in Chakra UI, you can utilize the following properties:
  • 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.

Code

Customizing Placeholder Text

⦾ You can style the placeholder of an input by using the _placeholder prop. By default, the placeholder has an opacity of 0.6. If you want to specify a specific color for the placeholder, you may need to set the opacity to 1.

Code

Input Types

⦾ The Input component in Chakra UI provides support for various input types, allowing you to create input fields tailored to different data formats and requirements. These input types include dateTime, color, search, file, and more. Below, you will find a examples of many of the different input types.
Date / Time Selector
Month
Week
Color Selector
File Upload
Email Address
Number Input
Search Input
Telephone Number
URL
Password

Code

Did you know?

Creative Idea No. 1

Real-Time Data Filtering: You can utilize Chakra UI's Input component to create a live search or filter functionality in your application. It's quite simple and enhances the user experience significantly, especially when dealing with large sets of data. In this example, as the user types in the Input field, the list below gets updated in real-time, showing only items that include the text entered.
Apple
Banana
Cherry
Date
Elderberry

Code

Creative Idea No. 2

Input With Autocomplete Functionality: You can pair the Input component with the List component from Chakra UI to implement an autocomplete functionality. This can greatly enhance the user experience by providing users with potential matches as they type. In this example, as the user types in the Input field, a List of suggested words that match the input appears below. The list updates as the user continues to type.

Code

Creative Idea No. 3

Password Strength Indicator: You can create a password strength indicator using Chakra UI's Input and Progress components. This is a creative way to provide visual feedback about password strength, which can encourage users to choose stronger passwords. In this example, as the user types a password in the Input field, a Progress bar and a text indicating the strength of the password update in real-time. The color and text change based on the password strength (which is simply estimated by its length for simplicity and simulation in this case).

Weak Password

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.