@chakra-ui/form-control

@chakra-ui/form-control

Form Control component is used to manage 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 form 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 colorblind 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`
  <FormHelperText>Keep your first name short</FormHelperText>
  // 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 required indicator

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

<FormControl as="fieldset">
  <FormLabel as="legend" requiredIndicator={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>