MUISelect

MUISelect wraps the Material UI Select with label, error and helper-text handling. It supports single or multiple selection and either primitive or object options via labelKey/valueKey.

Tip

If the number of options exceeds 20, consider using MUIAutocomplete or MUIMultiAutocomplete for better searchability, improved keyboard navigation, and overall performance.

Usage#

import MUISelect, { MUISelectProps } from '@nish1896/mui-components/mui/select';

const [role, setRole] = useState();

<MUISelect
  fieldName="role"
  value={role}
  onValueChange={({ newValue }) => setRole(newValue)}
  options={['Admin', 'Editor', 'Viewer']}
/>

For options as an array of objects:

<MUISelect
  fieldName="country"
  options={[
    { code: 'AUS', country: 'Australia' },
    { code: 'IN', country: 'India' },
    { code: 'UAE', country: 'United Arab Emirates' },
  ]}
  labelKey="country"
  valueKey="code"
  multiple
/>

Warning

When using an array of objects for options, both labelKey and valueKey are required. If either is missing, an error will be thrown.

Props#

MUISelectProps also accepts the remaining SelectProps. 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.
`value`	`string \| number \| (string \| number)[] \| null`	Current select value, normalized with `valueKey` for object options. Pass an array when `multiple` is true.
`onValueChange`*	`({ newValue, event, child }) => void`	Called after the selected value is normalized using `valueKey` for object options. `child` is the selected option element provided by MUI Select.
`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.
`renderOptionLabel`	`(option) => ReactNode`	Custom renderer for option labels. When not provided, the label is derived from the option value or the property specified by `labelKey`.
`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.
`multiple`	`boolean`	When true, allows selecting multiple values.
`showDefaultOption`	`boolean`	When true, displays a default placeholder option at the top of the dropdown menu. The option uses an empty string as its value and is automatically disabled when the field is required. Default: `false`
`defaultOptionText`	`string`	Custom text displayed for the default option when `showDefaultOption` is enabled. Default: `Select ${fieldLabel}`
`placeholder`	`string`	Placeholder text displayed in the select input itself when no option is selected (not rendered as a selectable menu item).
`label`	`ReactNode`	Label displayed for the field. Defaults to a human-readable label derived from `fieldName`, e.g. `firstName` becomes `First Name`
`showLabelAboveFormField`	`boolean`	When true, renders the field label above the form field in the FormLabel component, instead of inside or beside it.
`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.

Playground#

Reference#

MUI Select

File Uploader

Native Select