isRequired with Formik / React Hook Form

Description

It would be nice to have the option to signify a field that it is required via Chakra UI API while using a 3rd party form validator tool

Problem Statement/Justification

Currently the isRequired attribute conflicts with libraries like Formik / React Hook Form

With Formik from Docs live edit:

With React Hook Form browser’s validator kicks in

Proposed Solution or API

It would be nice to have an attribute that would only add the asterisk and the aria attribute It can be called e.g. isRequiredIndicator, isRequiredIndicatorOnly, isRequiredAsterisk or isRequiredVisual, whatever

Alternatives

No response

Additional Information

No response

[steven-prybylynskyi]

Crafted a temporary solution

import { chakra, useStyles } from '@chakra-ui/react';
import { cx } from '@chakra-ui/utils';

/**
 * This component exists until there'll be a corresponding Chakra component available
 * @see https://github.com/chakra-ui/chakra-ui/issues/4770
 */
export function CbRequiredIndicator() {
  const styles = useStyles();
  const className = cx('chakra-form__required-indicator');

  return (
    <chakra.span
      children="*"
      className={className}
      __css={styles.requiredIndicator}
      role="presentation"
      aria-hidden="true"
    />
  );
}

[hixus]

In newer versions of chakra (at least 2.0.4) useStyles is deprecated, so it needs to be changed to useFormControlStyles

export function CbRequiredIndicator() {
  const styles = useFormControlStyles();
  const className = cx("chakra-form__required-indicator");

  return (
    <chakra.span
      className={className}
      __css={styles.requiredIndicator}
      role="presentation"
      aria-hidden="true"
    >
      *
    </chakra.span>
  );
}