@chakra-ui/form-control

What is @chakra-ui/form-control?

@chakra-ui/form-control is a package from the Chakra UI library that provides a set of components and hooks to build accessible and customizable form controls in React applications. It helps in managing form state, validation, and accessibility with ease.

What are @chakra-ui/form-control's main functionalities?

FormControl

The FormControl component is used to group form elements and manage their state and validation. It provides a way to display error messages and ensure accessibility.

import { FormControl, FormLabel, Input, FormErrorMessage } from '@chakra-ui/react';

function Example() {
  const [input, setInput] = React.useState('');
  const isError = input === '';

  return (
    <FormControl isInvalid={isError}>
      <FormLabel htmlFor='email'>Email</FormLabel>
      <Input id='email' type='email' value={input} onChange={(e) => setInput(e.target.value)} />
      {isError && <FormErrorMessage>Email is required.</FormErrorMessage>}
    </FormControl>
  );
}

FormLabel

The FormLabel component is used to label form inputs. It ensures that the label is properly associated with the input for accessibility purposes.

import { FormLabel } from '@chakra-ui/react';

function Example() {
  return (
    <FormLabel htmlFor='name'>Name</FormLabel>
  );
}

FormErrorMessage

The FormErrorMessage component is used to display error messages when form validation fails. It is typically used within a FormControl component.

import { FormControl, FormLabel, Input, FormErrorMessage } from '@chakra-ui/react';

function Example() {
  const [input, setInput] = React.useState('');
  const isError = input === '';

  return (
    <FormControl isInvalid={isError}>
      <FormLabel htmlFor='email'>Email</FormLabel>
      <Input id='email' type='email' value={input} onChange={(e) => setInput(e.target.value)} />
      {isError && <FormErrorMessage>Email is required.</FormErrorMessage>}
    </FormControl>
  );
}

Other packages similar to @chakra-ui/form-control

formik

Formik is a popular form library for React that provides a comprehensive set of tools for managing form state, validation, and submission. It offers more advanced features compared to @chakra-ui/form-control, such as field-level validation and nested forms.

react-hook-form

React Hook Form is a performant, flexible, and extensible form library for React. It uses hooks to manage form state and validation, making it lightweight and easy to integrate. It offers better performance and less boilerplate compared to @chakra-ui/form-control.

redux-form

Redux Form is a library that integrates form state management with Redux. It is suitable for applications that already use Redux for state management. It provides more control over form state but can be more complex to set up compared to @chakra-ui/form-control.

README

@chakra-ui/form-control

Form Control component is used to manange form controls such input fields, checkbox and radio buttons. It provides components and context that make your form fields accessible by default.

• FormControl - the top level component that provides context
• FormLabel - the visible form control label
• FormHelperText - the from control's assistive text that guides the user. If added, it hides when there's an error in the field.
• FormErrorMessage - the form control's error feedback. If there's a help text visible when the control is invalid, it replaces the help text, to prevent content shift
• FormErrorIcon - an icon that indicates the error state for colorbind users.

Installation

yarn add @chakra-ui/form-control

# or

npm install @chakra-ui/form-control

Import component

import {
  FormControl,
  FormLabel,
  FormErrorMessage,
  FormHelperText,
  FormErrorIcon,
} from "@chakra-ui/form-control"

Basic Usage

The FormControl component automatically provides the id for the input component to be fully accessible.

With Input

<FormControl>
  // automatically gets `htmlFor`
  <FormLabel>First name:</FormLabel>
  // automatically gets `id` and `aria-*` properties
  <Input placeholder="Enter your first name..." />
  // automatically gets `id` and hides if `isInvalid` is passed to `FormControl`
  <FormHelpText>Keep your first name short</FormHelpText>
  // automatically gets `id` and shows if `isInvalid` is passed to `FormControl`
  <FormErrorMessage>First name is invalid</FormErrorMessage>
</FormControl>

With Checkbox group

<FormControl as="fieldset">
  <FormLabel as="legend">Who is better:</FormLabel>
  <CheckboxGroup>
    <Checkbox>Naruto</Checkbox>
    <Checkbox>Boruto</Checkbox>
  </CheckboxGroup>
  <FormErrorMessage>C'mon! You must select one</FormErrorMessage>
</FormControl>

Focus, Invalid and Disabled States

• When the Input component receives focus, it notifies the FormControl and adds data-focus on the FormLabel. Simply pass _focus to the FormLabel to style this state.

• If isInvalid is passed to the FormControl, it notifies the Input and adds data-invalid to the FormLabel so you can change the styles of the label

• If isDisabled is passed to the FormControl, it makes the Input disabled, and adds data-disabled to the FormLabel so you can change the styles of the label

Changing the requried indicator

To change the required indicator beside the FormLabel, simply pass the indicator prop and set it to your custom indicator components.

<FormControl as="fieldset">
  <FormLabel as="legend" indicator={CustomIndicator}>
    Who is better:
  </FormLabel>
  <CheckboxGroup>
    <Checkbox>Naruto</Checkbox>
    <Checkbox>Boruto</Checkbox>
  </CheckboxGroup>
  <FormErrorMessage>C'mon! You must select one</FormErrorMessage>
</FormControl>

Adding a Visual Icon

<FormControl
  label="Tell us about yourself:"
  helpText="Keep it short and sweet!"
  errorText="C'mon! You must select one"
>
  <InputGroup>
    <Input paddingRight="32px" />
    <InputRightElement>
      <FormErrorIcon />
    </InputRightElement>
  </InputGroup>
</FormControl>