RHFNativeSelect
RHFNativeSelect
extends NativeSelect
and is recommended to use when designing forms to view over mobile.
Just like RHFSelect, it also accepts both
array as well as object-array values.
RHFNativeSelect
extends NativeSelect
and is ideal for mobile-friendly form designs. Similar to RHFSelect,
it supports both arrays and arrays of objects for flexible option rendering.
Usage
import { RHFNativeSelect, RHFNativeSelectProps } from '@nish1896/rhf-mui-components';
Here’s a basic example with an array of strings:
<RHFNativeSelect
fieldName="color"
register={register}
options={['Red', 'Blue', 'Orange']}
errorMessage={errors?.color?.message}
/>
And with an array of objects:
<RHFNativeSelect
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 RHFNativeSelectProps
interface extends NativeSelectProps
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: ChangeEvent) => void | An optional callback function when the value of a field changes. The changed value can be obtained from e.target.value . | |
label | ReactNode | The text to render in FormLabel component. By default, the value of fieldName such as firstName will be transformed to display "First Name". | |
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. |