@chakra-xui/form-control
v1.1.0
Published
React component to provide validation states to form fields
Downloads
82
Maintainers
Readme
@chakra-xui/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-xui/form-control
# or
npm install @chakra-xui/form-control
Import component
import {
FormControl,
FormLabel,
FormErrorMessage,
FormHelperText,
FormErrorIcon,
} from "@chakra-xui/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 theFormControl
and addsdata-focus
on theFormLabel
. Simply pass_focus
to theFormLabel
to style this state.If
isInvalid
is passed to theFormControl
, it notifies theInput
and addsdata-invalid
to theFormLabel
so you can change the styles of the label.If
isDisabled
is passed to theFormControl
, it makes theInput
disabled, and addsdata-disabled
to theFormLabel
so you can change the styles of the label.
Changing the required 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>