React component to provide validation states to form fields
npm install @chakra-ui/form-controlForm 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.
``sh
yarn add @chakra-ui/form-control
npm install @chakra-ui/form-control
`
`jsx`
import {
FormControl,
FormLabel,
FormErrorMessage,
FormHelperText,
FormErrorIcon,
} from "@chakra-ui/form-control"
The FormControl component automatically provides the id for the input
component to be fully accessible.
`jsxhtmlFor
// automatically gets
// automatically gets and aria-* propertiesid
// automatically gets and hides if isInvalid is passed to FormControl
// automatically gets and shows if isInvalid is passed to FormControl
`jsx`
- When the Input component receives focus, it notifies the FormControl anddata-focus
adds on the FormLabel. Simply pass _focus to the FormLabel
to style this state.
- If isInvalid is passed to the FormControl, it notifies the Input anddata-invalid
adds to the FormLabel so you can change the styles of the
label.
- If isDisabled is passed to the FormControl, it makes the Input disabled,data-disabled
and adds to the FormLabel so you can change the styles of
the label.
To change the required indicator beside the FormLabel, simply pass therequiredIndicator prop and set it to your custom indicator components.
`jsx`
Who is better:
`jsx``
helpText="Keep it short and sweet!"
errorText="C'mon! You must select one"
>