@chakra-ui/c-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
Installation
yarn add @chakra-ui/c-form-control
# or
npm i @chakra-ui/c-form-controlImport component
import {
CFormControl,
CFormLabel,
CFormErrorMessage,
CFormHelperText,
CFormErrorIcon,
} from "@chakra-ui/c-form-control"Basic Usage
The CFormControl component automatically provides the id for the input
component to be fully accessible.
With Input
<template>
<c-form-control>
<!-- Will automatically get the "for" attribute -->
<c-form-label> First name </c-form-label>
<!-- Will automatically get the "id" and corresponding "aria-*" propertues -->
<c-input placeholder="Enter your first name..." />
<!-- Will automatically get `id` and hides if `isInvalid` is passed to `CFormControl` -->
<c-form-helper-text> Keep it very short and sweet! </c-form-helper-text>
<!-- Will automatically gets `id` and shows if `isInvalid` is passed to `FormControl` -->
<c-form-error-message>
<c-form-error-icon />
Your first name is invalid
</c-form-error-message>
</c-form-control>
</template>Focus, Invalid and Disabled States
-
When the
CInputcomponent receives focus, it notifies theCFormControland addsdata-focuson theFormLabel. Simply pass_focusto theFormLabelto style this state. -
If
isInvalidis passed to theCFormControl, it notifies theInputand addsdata-invalidto theFormLabelso you can change the styles of the label. -
If
isDisabledis passed to theCFormControl, it makes theInputdisabled, and addsdata-disabledto theCFormLabelso you can change the styles of the label.
Changing the required indicator
To change the required indicator beside the CFormLabel, use the indicator slot to swap out the rendered indicator.
<template>
<c-form-control id="first-name" is-required>
<c-form-label>
First name
<template v-slot:indicator> 📍 </template>
</c-form-label>
<c-form-helper-text> Keep it very short and sweet! </c-form-helper-text>
</c-form-control>
</template>Adding a Visual Icon
<template>
<c-form-control id="first-name" is-required>
<c-form-label>First name</c-form-label>
<c-form-helper-text> Keep it very short and sweet! </c-form-helper-text>
</c-form-control>
</template>