see Docs see Source see WAI-ARIA import { h , defineComponent , computed , PropType , toRefs } from "vue" ; import { chakra , ComponentWithProps , DeepPartial , DOMElements , useMultiStyleConfig , StylesProvider , omitThemingProps , HTMLChakraProps , useStyles , } from "@chakra-ui/vue-system" ; import { CFormControlProps , CFormControlProviderContext , useFormControlProvider , FormControlProvider , useFormControlContext , } from "./use-form-control" ; /**
 * `CFormControl` provides context such as
 * `isInvalid`, `isDisabled`, and `isRequired` to form elements.
 *
 * This is commonly used in form elements such as `input`,
 * `select`, `textarea`, etc.
 */ export const formControlProps = { isRequired : Boolean as PropType < CFormControlProps [ "isRequired" ] > , isDisabled : Boolean as PropType < CFormControlProps [ "isDisabled" ] > , isInvalid : Boolean as PropType < CFormControlProps [ "isInvalid" ] > , isReadOnly : Boolean as PropType < CFormControlProps [ "isReadOnly" ] > , label : String as PropType < CFormControlProps [ "label" ] > , id : String as PropType < CFormControlProps [ "id" ] > , } ; export const CFormControl = defineComponent ( { props : { as : { type : [ Object , String ] as PropType < DOMElements > , default : "div" , } , ... formControlProps , } , setup ( _props , { slots , attrs } ) { const { as , ... props } = toRefs ( _props ) ; const ownProps = computed ( ( ) => props ) ; const styles = useMultiStyleConfig ( "Form" , props ) ; const { rootProps , ... _context } = useFormControlProvider ( ownProps . value ) ; const context = computed ( ( ) => _context ) ; FormControlProvider ( context ) ; StylesProvider ( styles ) ; return ( ) => ( < chakra . div as = { as . value } { ... rootProps . value } __css = { styles . value . container } __label = "form" { ... attrs } > { slots } < /chakra.div>); } , } ) ; export interface CHelpTextProps extends HTMLChakraProps < "div" > { } /**
 * CFormHelperText
 *
 * Assistive component that conveys additional guidance
 * about the field, such as how it will be used and what
 * types in values should be provided.
 */ export const CFormHelperText = defineComponent ( ( props , { attrs , slots } ) => { const field = useFormControlContext ( ) ; const styles = useStyles ( ) ; const handleVNodeMounted = ( ) => { field . value . hasHelpText . value = true ; } ; return ( ) => ( < chakra . div __label = "form__helper-text" onVnodeBeforeMount = { handleVNodeMounted } { ... field . value . helperTextProps . value } __css = { styles . value . helperText } > { slots } < /chakra.div>); } ) ;