# @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
```sh
yarn add @chakra-ui/form-control
# or
npm install @chakra-ui/form-control
```
## Import component
```jsx
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
```jsx
// automatically gets `htmlFor`
First name:
// automatically gets `id` and `aria-*` properties
// automatically gets `id` and hides if `isInvalid` is passed to `FormControl`
Keep your first name short
// automatically gets `id` and shows if `isInvalid` is passed to `FormControl`
First name is invalid
```
### With Checkbox group
```jsx
Who is better:NarutoBorutoC'mon! You must select one
```
## 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.
```jsx
Who is better:
NarutoBorutoC'mon! You must select one
```
## Adding a Visual Icon
```jsx
```