RHFSelect
RHFSelect
is an extended version of Select,
allowing users to select one or more options. One significant advantage is its
ability to accept both arrays and arrays of objects, making it easier to
render options with differing labels and values without custom logic.
Usage
import { RHFSelect, RHFSelectProps } from '@nish1896/rhf-mui-components';
Here’s a basic example with an array of strings:
<RHFSelect
fieldName="color"
register={register}
options={['Red', 'Blue', 'Orange']}
errorMessage={errors?.color?.message}
/>
For options as an array of objects:
<RHFSelect
fieldName="country"
register={register}
options={[
{ code: 'AUS', country: 'Australia' },
{ code: 'IN', country: 'India' },
{ code: 'UAE', country: 'United Arab Emirates' },
]}
labelKey="country"
valueKey="code"
errorMessage={errors?.country?.message}
/>
note
When using an array of objects for options, both labelKey
and valueKey
are required. If either is missing, an error will be thrown.
Examples
API
The RHFSelectProps
interface extends SelectProps
and accepts the following additional props:
Name | Type | Required | Description |
---|---|---|---|
fieldName | string | ✅ | React Hook Form requires name as a key for the registration process. |
register | UseFormRegister | ✅ | The register option yielded on calling the useForm hook. |
registerOptions | RegisterOptions | Register options if using react-hook-form without any validation libraries like yup or Joi. | |
options | string[]` or `number[]` or `object[] | ✅ | Icon component to hide password text, such as VisibilityOffIcon from @mui/icons-material/VisibilityOff . |
labelKey | string | ✅ | The key of object in your array, whose value would be shown as the label in RHFSelect or RHFCheckboxGroup . Only required when options prop is an array of objects. |
valueKey | string | ✅ | The key of object in your array, whose value would be actual value of the option selected in RHFSelect or RHFCheckboxGroup . Only required when options prop is an array of objects. |
defaultValue | string OR string[] OR number OR number[] | When rendering RHFSelect or RHFNativeSelect with some initial value, pass the value in this prop, so that this value is selected. The value would be an array if multiple=true | |
showDefaultOption | boolean | Show default Label of the disabled option when value of RHFSelect or RHFNativeSelect is '' . This text cane be changed using the defaultOptionText prop. | |
defaultOptionText | string | Custom text to replace the default text when showDefaultOption is true for RHFSelect or RHFNativeSelect . | |
onValueChange | (e: SelectChangeEvent) => void | An optional callback function when the value of a field changes. The changed value can be obtained from e.target.value | |
showLabelAboveFormField | boolean | Render form label above the form field in FormLabel component. | |
formLabelProps | FormLabelProps | FormLabelProps to customise FormLabel component for a field. Multiple fields can be configured using the ConfigProvider component. | |
helperText | ReactNode | Optional helperText to render under RHFSelect or RHFNativeSelect field. | |
errorMessage | ReactNode | Error message to be shown for a field in FormHelperText component. | |
hideErrorMessage | boolean | Prevent replacing of form HelperText by error message during validation trigger. | |
formHelperTextProps | FormHelperTextProps | FormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component. |