MUINativeSelect
MUINativeSelect wraps the Material UI Native Select — a real <select> element, ideal for mobile and lightweight dropdowns — with the same label/error/helper-text handling as the rest of the suite.
Usage
import MUINativeSelect, { MUINativeSelectProps } from '@nish1896/mui-components/mui/native-select';const [country, setCountry] = useState();
<MUINativeSelect
fieldName="country"
options={['India', 'United States', 'Germany']}
value={country}
onValueChange={({ newValue }) => setCountry(newValue)}
/>Warning
When using an array of objects for options, both labelKey and valueKey
are required. If either is missing, an error will be thrown.
API
For object options, pass labelKey and valueKey.
Props marked with * are required.
| Name | Type | Description |
|---|---|---|
fieldName* | string | Name/path of the field. Used to derive the id, the default label, and the name attribute. This prop is required for all components. |
options* | string[] | number[] | object[] | An array with string, numeric or object values. Make sure to pass labelKey and valueKey when options is an array of objects. |
labelKey | string | Property name used as the visible label for each option. Required when options is an array of objects. |
valueKey | string | Property name used to derive the exposed value for each option. Required when options is an array of objects. |
value | string | number | null | Current select value, normalized with valueKey for object options. |
onValueChange* | ({ newValue, event }) => void | Called after the selected value is normalized using valueKey for object options. |
getOptionDisabled | (option) => boolean | Function used to determine whether an option should be disabled. Return true to disable the option and prevent it from being selected. |
label | ReactNode | Label displayed for the field. Defaults to a human-readable label derived from fieldName, e.g. firstName becomes "First Name". |
showLabelAboveFormField | boolean | Whether the field label renders above the control. This control has no built-in inline label, so it defaults to true; pass false to hide the visible label (the accessible name is still applied).Default: true |
formLabelProps | FormLabelProps | FormLabelProps forwarded to the internal FormLabel. The id is managed by the component. Multiple fields can be configured using the ConfigProvider component. |
hideLabel | boolean | When true, hides the rendered field label while preserving accessible labeling where possible. |
required | boolean | Indicates that the field is mandatory by adding an asterisk symbol (*) to the form label and setting the relevant accessibility attributes. |
errorMessage | string | string[] | Validation error for the field — pass a single message string, or a string[] when the field can fail multiple rules at once (every message is shown together). A non-empty string or array puts the field in an error state; undefined/''/[] clear it.Normalize your form library's error shape to this at the call site (e.g. an RHF FieldError via its .message). Use renderError to customize how the message(s) are rendered. |
renderError | (errors: string[]) => ReactNode | Custom renderer for the resolved error message(s), called only when the field is in an error state. Always receives a string[] — use errors[0] for the common single-message case, or map over errors when a field fails several rules. By default a single message renders as text and multiple messages render on separate lines. |
hideErrorMessage | boolean | If true, hides the error message text while keeping the field in an error state. |
helperText | ReactNode | Content displayed in the FormHelperText component below the field when there is no visible validation error. |
formHelperTextProps | FormHelperTextProps | FormHelperTextProps forwarded to the internal FormHelperText. The id is managed by the component. Multiple fields can be configured using the ConfigProvider component. |
customIds | { field, label, helperText, error } | Overrides the default field, label, helper text, and error IDs used for accessibility. |