Skip to main content

RHFRating

Ratings provide insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own. RHFRating extends the Rating component, so it accepts almost all props of Rating and can be customized accordingly!

Usage

import { RHFRating, RHFRatingProps } from '@nish1896/rhf-mui-components';
<RHFRating
fieldName="rating"
control={control}
errorMessage={errors?.rating?.message}
/>

Examples

API

RHFRatingProps extends RatingProps and accepts the following additional props:

NameTypeRequiredDescription
fieldNamestringReact Hook Form requires name as a key for the registration process.
controlUseFormControlThe control option yielded on calling the useForm hook.
onValueChange(e: SyntheticEvent, newValue: number OR null) => voidAn optional callback function that returns the changed value of rating component
labelReactNodeThe text to render in FormLabel component. By default, the value of fieldName such as firstName will be transformed to display "First Name".
showLabelAboveFormFieldbooleanRender form label above the form field in FormLabel component.
formLabelPropsFormLabelPropsFormLabelProps to customise FormLabel component for a field. Multiple fields can be configured using the ConfigProvider component.
helperTextReactNodeOptional helperText to render under RHFSelect or RHFNativeSelect field.
errorMessageReactNodeError message to be shown for a field in FormHelperText component.
hideErrorMessagebooleanPrevent replacing of form HelperText by error message during validation trigger.
formHelperTextPropsFormHelperTextPropsFormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component.