Chakra-UI

I♥️Components

FormControl

|

Chakra Docs

|

⦾ The FormControl component in Chakra UI is an essential building block that helps users create interactive and accessible forms. As a versatile container, it encompasses numerous subcomponents which make the creation of custom form inputs an intuitive and efficient process.

FormControl features several useful subcomponents: All these subcomponents work collectively to facilitate a superior user experience in form handling.

  • FormControl: This is the wrapper for the form component. It provides context for all the other subcomponents and is responsible for the form's accessibility.
  • FormLabel: This subcomponent offers a textual description to the related form control, increasing the usability of the form for users.
  • FormHelperText: This is a critical accessibility feature providing additional information about the form field. It aids users in correctly filling out the form.
  • FormErrorMessage: When form validation fails, this subcomponent presents an error message to guide the user in fixing the issue.

These components can be imported as follows:

Examples

Basic Usage

⦾ In this example, a FormControl is created with a FormLabel and an Input field. The FormLabel displays the word 'Name', guiding users on the expected input. The Input type is set as 'text', allowing users to enter textual input.

Code

Helper Text and Error Message

⦾ Here's an example that demonstrates how you can utilize the key components of FormControl to create a user-friendly experience for collecting an email address. The FormControl component is used to gather the email input. The isRequired attribute ensures that the form cannot be submitted without filling in this field. The FormHelperText component provides reassurance to users regarding the privacy of their email address. In case of validation failure, the FormErrorMessage component comes into play, displaying a helpful message to guide the user in correcting their input.

We'll never share your email.

Code

Incorporating a Radio Group

⦾ In this example, we create a form that allows users to select their favorite character from various Studio Ghibli films. The FormControl is set as a 'fieldset', a group of related form controls, with FormLabel serving as the 'legend', a caption for the fieldset. RadioGroup is used to group related Radio buttons, ensuring that only one option can be selected by the user. By default, the Radio button for 'Totoro' is selected, as indicated by the defaultValue prop of the RadioGroup. FormHelperText provides additional instructions to the users, indicating that they should select their favorite character only if they're a fan of Studio Ghibli.
Favorite Ghibli Character
Select if you're a fan of Studio Ghibli.

Code

Incorporating Dropdown Selection

⦾ This example demonstrates how to use the Chakra UI FormControl with a Select component. We create a form control for a drop-down list of Studio Ghibli films, letting the user pick their favorite. The form control includes a label for the drop-down list ('Favorite Film'), the selection component itself, and a placeholder text that prompts the user to make a selection.

Code

Number Input

⦾ Here, we demonstrate how to use a NumberInput with FormControl. This provides a user-friendly way to input a numerical value -- in this case, the user's age. The form control features a NumberInput that comes with increment and decrement buttons, allowing the user to easily adjust the value. The input field is constrained within a defined range from 1 to 100, ensuring that the age entered is within realistic bounds.

Code

Did you know?

Creative Idea No. 1

Inline Forms: While it's more common to see forms with labels and inputs stacked vertically, FormControl can also be used to create inline forms where the label and input are on the same line. This can help with space efficiency and improve the user experience on wide screens.

Code

Creative Idea No. 2

Form Feedback Icons: You can provide visual feedback to users about their form inputs with feedback icons. For example, you can show a check icon for valid inputs and a warning icon for invalid ones.
Your email is invalid.

Code

Creative Idea No. 3

Dynamic Forms: You can use the FormControl component to create dynamic forms. Dynamic forms are forms that can add or remove input fields based on user interaction. This can super handy in many real-world applications where the number of inputs can vary, such as adding ingredients to a recipe or adding team members to a project.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.