Material UI integrated components for Remate

this package provides a comprehensive set of customizable and reusable Material UI integrated components for Remate.

Overview

• Material-UI Integration: All components are fully compatible with MUI theme, allowing for consistent styling across your application.
• Localization Support: A built-in localization system enables easy integration with custom translation systems, helping to localize your app without adding additional dependencies.
• TypeScript: type definitions come built-in in the package
• Accessibility Support: Built with accessibility in mind, adhering to MUI's best practices.
• Fully responsive UI
• Customizable and Extendable
• RTL Support

Installation

To use the components in your project, you can install the package using npm or yarn:

npm install @remate/components

Peer Dependencies

npm install @mui/material @emotion/react @emotion/styled

Table of Contents

• Basic Usage
• Localization
  • useLocalization
  • LocaleText
• Customization
• Hooks
  • useDefaultProps
• Utilities
  • fData
  • isRtlText
  • isReactRef
  • propsMerge
• React Hook Form Components
  • RHFForm
  • RHFTextField
  • RHFNumberField
  • RHFPassword
  • RHFCheckbox
  • RHFSwitch
  • RHFRadioGroup
  • RHFDatePicker
  • RHFTimePicker
  • RHFDateTimePicker
  • RHFAutocomplete
  • RHFSelect
  • RHFMultiSelect
  • RHFLocationPicker
  • RHFUpload
  • RHFCodeField
• TextField
• Password
• Checkbox
• Switch
• Select
• MultiSelect
• Date Pickers
  • DatePicker
  • TimePicker
  • DateTimePicker
  • PickersLocalizationProvider
• Spin
• LocationPicker
• LocationView
• Upload
• CodeField
• Image
• NumberField
• FileThumbnail

Basic Usage

This example demonstrates how to build a simple form using the @remate/components. The form leverages the LocalizationProvider for localized validation messages and the RHFForm components for seamless integration with React Hook Form. It also integrates with Material-UI's theming capabilities for consistent styling.

import React from 'react';
import { RHFForm, RHFTextField, LocalizationProvider } from '@remate/components';
import { Button, ThemeProvider } from '@mui/material';
import { useForm } from 'react-hook-form';

function App() {
	const methods = useForm();

	const onSubmit = methods.handleSubmit((data) => {
		console.log('Form Data:', data);
	});

	return (
		<ThemeProvider theme={/*your application theme*/}>
			<LocalizationProvider
				lang="fa"
				// Customize local texts
				localeText={{ 'validation.required': () => 'این فیلد اجباری است' }}
			>
				<RHFForm
					methods={methods}
					onSubmit={onSubmit}
				>
					<RHFTextField
						name="name"
						label="Name"
					/>
					<RHFNumberField
						name="age"
						label="Age"
					/>
					<Button
						type="submit"
						variant="contained"
						color="primary"
					>
						Submit
					</Button>
				</RHFForm>
			</LocalizationProvider>
		</ThemeProvider>
	);
}

export default App;

Localization

Localization Provider allows you to easy manage translation and localization of components. The provider uses a context-based approach to deliver translation functionality across all components, ensuring that any text in the components can be translated dynamically.

The Localization Provider can be customized with your own set of translation keys, and it supports a default language system for managing translations across different locales. This makes it easy to integrate into your existing multilingual applications.

usage example

import { LocalizationProvider } from '@remate/components';

function App() {
  return (
    <LocalizationProvider
      lang={/*Application language*/}
      localeText={/*Customize local texts*/}
    >
      {/* use components Here*/}
    </LocalizationProvider>
  )
}

useLocalization

Returns the localization context value. Must be used inside LocalizationProvider.

import { useLocalization } from '@remate/components';

function MyComponent() {
  const { translate, lang } = useLocalization();

  return <span>{translate('select.emptyOptionLabel')}</span>;
}

| Prop / Return | Type | Description | | ------------- | ---- | ----------- | | lang | string | Current language code (default: "en"). | | translate | (key: keyof LocaleText, params?: any) => string | Resolves a localization key to text. |

LocaleText

The LocaleText and LocalizationContextType interfaces (exported from @remate/components) define all built-in translation keys, including validation messages, autocomplete labels, date picker labels, upload messages, and map-related strings. Pass partial overrides via LocalizationProvider's localeText prop.

Customization

Just like other MUI components, Remate components can be customized globally using the theme.components configuration. This allows you to define default props, styles, and variants via the theme in a consistent and centralized way.

Refer to MUI's customization guide for general theming patterns.

Supported components

You can define defaults and overrides for the following Remate components in your theme:

| Component | Theme key (theme.components) | | -------------------- | -------------------------------- | | TextField | RemateTextField | | Password | RematePassword | | Checkbox | RemateCheckbox | | Switch | RemateSwitch | | Select | RemateSelect | | MultiSelect | RemateMultiSelect | | DatePicker | RemateDatePicker | | TimePicker | RemateTimePicker | | DateTimePicker | RemateDateTimePicker | | NumberField | RemateNumberField | | CodeField | RemateCodeField | | Spin | RemateSpin | | LocationPicker | RemateLocationPicker | | LocationView | RemateLocationView | | Upload | RemateUpload | | Image | RemateImage | | FileThumbnail | RemateFileThumbnail | | RHFForm | RemateRHFForm | | RHFTextField | RemateRHFTextField | | RHFPassword | RemateRHFPassword | | RHFNumberField | RemateRHFNumberField | | RHFCheckbox | RemateRHFCheckbox | | RHFSwitch | RemateRHFSwitch | | RHFRadioGroup | RemateRHFRadioGroup | | RHFDatePicker | RemateRHFDatePicker | | RHFTimePicker | RemateRHFTimePicker | | RHFDateTimePicker | RemateRHFDateTimePicker | | RHFAutocomplete | RemateRHFAutocomplete | | RHFSelect | RemateRHFSelect | | RHFMultiSelect | RemateRHFMultiSelect | | RHFLocationPicker | RemateRHFLocationPicker | | RHFUpload | RemateRHFUpload | | RHFCodeField | RemateRHFCodeField |

All Remate components are integrated with MUI’s system and extend the Components interface under the module "@mui/material/styles/components".

Example

Here’s how you can globally customize the RemateUpload and RemateImage components:

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
	components: {
		RemateUpload: {
			defaultProps: {
				multiple: true,
				maxFiles: 3
			}
		},
		RemateImage: {
			defaultProps: {
				effect: 'blur',
				aspectRatio: '16/9'
			}
		}
	}
});

This approach helps ensure consistency across your application and reduces the need to repeat props and styles in every usage.

Hooks

useDefaultProps

Internal hook used by Remate components to merge theme.components[RemateComponentName].defaultProps with incoming props. You can import it when building custom wrappers that follow the same theming pattern.

import { useDefaultProps } from '@remate/components';

function MyWrapper(inProps: MyProps) {
  const props = useDefaultProps({ name: 'RemateTextField', props: inProps });
  // ...
}

| Param | Type | Description | | ----- | ---- | ----------- | | name | keyof Components | Theme component key (e.g. 'RemateUpload'). | | props | TProps | Props passed to the component. |

Returns: Merged props (theme defaultProps + props).

Utilities

Utility functions exported from @remate/components for use inside or outside the package.

fData

Formats a byte size into a human-readable string (e.g. 1024 → "1 KB").

import { fData } from '@remate/components';

fData(2048); // "2 KB"

| Param | Type | Description | | ----- | ---- | ----------- | | inputValue | number \| string \| null | Size in bytes. |

isRtlText

Detects whether the given text contains RTL characters (Arabic, Hebrew, Persian, etc.).

import { isRtlText } from '@remate/components';

isRtlText('سلام'); // true

| Param | Type | Description | | ----- | ---- | ----------- | | inputText | string | Text to analyze. |

Returns: boolean

isReactRef

Returns true if the value looks like a React ref object ({ current: ... }).

import { isReactRef } from '@remate/components';

| Param | Type | Description | | ----- | ---- | ----------- | | value | unknown | Value to check. |

Returns: boolean

propsMerge

Deep-merges two objects with special handling for React refs, elements, functions, and MUI sx props. Used by useDefaultProps.

import { propsMerge } from '@remate/components';

| Param | Type | Description | | ----- | ---- | ----------- | | object | TObject | Base object (typically theme defaults). | | source | TSource | Overrides. |

Returns: TObject & TSource

React Hook Form components

These components integrate seamlessly with React Hook Form for efficient form state management and leverage Material-UI's theming for consistent styling across your application.

Each form field is built with the following principles in mind:

• Ease of Use: Components are pre-configured for common use cases and can be easily customized using props.
• Validation Support: They work out of the box with React Hook Form's validation, ensuring robust form validation with minimal configuration.
• Theme Integration: Fully compatible with MUI's light and dark themes, adapting to the application's overall design effortlessly.
• Accessibility: Designed to adhere to accessibility standards for a better user experience.

RHFForm

The RHFForm component is a wrapper designed to simplify the integration of React Hook Form with your form components. It provides context for managing form state and validation, while ensuring a clean and structured setup for your forms.

Basic usage example

import React from 'react';
import { useForm } from 'react-hook-form';
import { RHFForm, RHFTextField } from '@remate/components';

function MyForm() {
	const methods = useForm({
		defaultValues: {
			name: '',
			email: ''
		}
	});

	const onSubmit = methods.handleSubmit((data) => {
		console.log('Form Data:', data);
	});

	return (
		<RHFForm
			methods={methods}
			onSubmit={onSubmit}
			formElementProps={{ className: 'my-custom-form' }}
		>
			<RHFTextField
				name="name"
				label="Name"
			/>

			<RHFTextField
				name="email"
				label="Email"
			/>

			<button type="submit">Submit</button>
		</RHFForm>
	);
}

export default MyForm;

Props

| Prop | Type | Required | Description | | -------- | -------- | ------------ | --------------- | | methods | UseFormReturn | ✅ | React Hook Form methods from useForm(). | | onSubmit | ReturnType<UseFormHandleSubmit> | ✅ | Submit handler from methods.handleSubmit(). | | formElementProps | FormHTMLAttributes (omit onSubmit, noValidate) | ❌ | Props passed to the underlying <form> element. | | children | ReactNode | ✅ | Form fields and actions. |

RHFTextField

The RHFTextField is a reusable form input component that integrates seamlessly with React Hook Form and Material-UI (MUI). It is designed to simplify the creation of text fields in forms by managing form state and validation using React Hook Form while leveraging the styling and features of Material-UI's TextField. Additionally, it supports various input types, including text, select, and other types provided by Material-UI's TextField component.

Basic usage example

<RHFTextField
	name="text field"
	label="text field"
	control={control}
	helperText="textfield helpertext sample"
	inputMode="search"
	type="text"
	placeholder="input"
/>

Props

The following table lists include props added by RHFTextField. For standard props, refer to the MUI Text Field documentation and React Hook Form use Controller documentation.

| Prop | Type | Required | Description | | ------------------ | ------------------------------------- | ------------ | --------------------------------------------------------------------------------------- | | name | string | ✅ | The name of the input field in the form state. | | control | Control<FieldValues> | ❌ | The React Hook Form control object to manage the form field. | | rules | ValidationRules | ❌ | Validation rules for the field (e.g., required, minLength, maxLength). | | transform | (value: string) => TransformedValue | ❌ | Function to transform the input value before updating the form state. | | autoDirection | boolean (default: true) | ❌ | Automatically sets the text direction based on the user's input language. | | nullable | boolean (default: true) | ❌ | When enabled, an empty string input ("") will be treated as a null value for the field. | | trim | boolean (default: true) | ❌ | Trims leading/trailing whitespace on blur. | | defaultValue | string | ❌ | Default value for the input field | | shouldUnregister | boolean | ❌ | Whether to unregister the input when removed from the UI. | | disabled | boolean | ❌ | Disables the input. |

RHFNumberField

The RHFNumberField component is a React Hook Form-integrated numeric input built on top of the NumberField component. It combines the power of form validation and control from react-hook-form with the enhanced number input experience provided by rc-input-number and MUI's TextField.

It’s ideal for use cases where you need precise and controlled numeric input as part of a form.

Basic usage example

<RHFNumberField
	name="price"
	control={control}
	label="Price"
	min={0}
	max={9999}
	step={0.5}
	helperText="Enter the item price"
/>

Props

The RHFNumberField accepts all props from NumberField, except for value and onChange, which are managed internally by react-hook-form.

It also supports the standard UseControllerProps from react-hook-form:

| Prop | Type | Required | Description | | --------- | ---------------------- | -------- | ---------------------------------------------------------------- | | name | string | ✅ | The name of the input field in the form state. | | control | Control<FieldValues> | ❌ | The React Hook Form control object to manage the form field. | | rules | ValidationRules | ❌ | Validation rules for the field (e.g., required, min, max). |

Other props from NumberField, such as min, max, step, formatter, and parser, can also be passed directly to customize behavior and formatting.

RHFPassword

The RHFPassword component is a reusable password input field that integrates seamlessly with React Hook Form and Material-UI (MUI). It is built on top of RHFTextField and is specifically designed for handling password inputs with an optional show/hide password toggle button.

Basic usage example

<RHFPassword
	name="password"
	label="Password"
	control={control}
	helperText="Enter your account password."
	showPasswordTogglerButtonPosition="end"
/>

Props

The RHFPassword component supports all props from RHFTextField except select. For shared props, refer to the RHFTextField documentation.

Additional Props

| Prop | Type | Default | Description | | ----------------------------------- | ------------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------- | | showPasswordTogglerButtonPosition | 'end' \| 'start' | 'end' | Determines the position of the show/hide password toggle button inside the input. | | slots | { showPasswordIcon?: React.ElementType; hidePasswordIcon?: React.ElementType; } | {} | Custom components for the show/hide password icons. | | slotProps | { showPasswordIcon?: React.SVGAttributes<SVGElement>; hidePasswordIcon?: React.SVGAttributes<SVGElement>; } | {} | Props passed to the show/hide password icon components. |

Notes

• By default, the password input masks the text; users can toggle visibility with the provided button.
• Icons for show/hide password can be customized using the slots and slotProps props.
• This component inherits all validation, state management, and styling capabilities from RHFTextField.

RHFCheckbox

The RHFCheckbox is a reusable checkbox component that integrates React Hook Form and Material-UI (MUI). It simplifies the creation of form checkboxes by managing state and validation using React Hook Form, while also leveraging the styling capabilities of Material-UI components.

Basic usage example

<RHFCheckbox
	name="notifications"
	control={control}
	label="Enable notifications"
/>

Props

The following table lists props added by RHFCheckbox. For other props, refer to the React Hook Form documentation and Checkbox / MUI Checkbox documentation.

| Prop | Type | Required | Description | | ------------ | ------------------------------- | -------- | --------------------------------------------------------------------------------------------------- | | name | string | ✅ | Name of the field in the form. | | control | Control<T> | ❌ | React Hook Form's control object. | | rules | RegisterOptions | ❌ | Validation rules for the field. | | required | boolean | ❌ | Indicates whether the checkbox is required for validation. | | helperText | string | ❌ | Additional text to display below the checkbox. | | onChange | (event, isChecked) => void | ❌ | Callback fired when the checkbox's value changes. | | onBlur | (event) => void | ❌ | Callback fired when the checkbox loses focus. | | slotProps | RHFCheckBoxProps["slotProps"] | ❌ | Allows customization of inner components via props. |

Inherits remaining props from Checkbox.

Also supports standard UseControllerProps (defaultValue, shouldUnregister, disabled, etc.).

RHFSwitch

The RHFSwitch is a reusable Switch component that integrates React Hook Form and Material-UI (MUI). It simplifies the creation of form switches by managing state and validation using React Hook Form, while also leveraging the styling capabilities of Material-UI components.

Basic usage example

<RHFSwitch
	name="notifications"
	control={control}
	label="Enable notifications"
/>

Props

The following table lists props added by RHFSwitch. For other props, refer to the React Hook Form documentation and Switch / MUI Switch documentation.

| Prop | Type | Required | Description | | ------------ | ----------------------------- | -------- | --------------------------------------------------------------------------------------------------- | | name | string | ✅ | Name of the field in the form. | | control | Control<T> | ❌ | React Hook Form's control object. | | rules | RegisterOptions | ❌ | Validation rules for the field. | | required | boolean | ❌ | Indicates whether the switch is required for validation. | | helperText | string | ❌ | Additional text to display below the switch. | | onChange | (event, isChecked) => void | ❌ | Callback fired when the switch value changes. | | onBlur | (event) => void | ❌ | Callback fired when the switch loses focus. | | slotProps | RHFSwitchProps["slotProps"] | ❌ | Allows customization of inner components via props. |

Inherits remaining props from Switch. Also supports UseControllerProps.

RHFRadioGroup

The RHFRadioGroup is a reusable component that integrates React Hook Form and Material-UI (MUI) to simplify the creation of radio group inputs in forms. It supports validation, localization, and customization while managing form state and leveraging Material-UI's styling

Basic usage example

<RHFRadioGroup
	name="radioField"
	label="radiolabel"
	control={control}
	defaultValue={'2'}
	helperText={'radio helpertext sample'}
	options={[
		{ value: '1', label: 'asdasd' },
		{ value: '2', label: 'asdasd2' }
	]}
	rules={{ required: true }}
/>

Props

The following table lists props added by RHFRadioGroup. For other props, refer to the React Hook Form documentation and Material-UI Radio documentation.

| Prop | Type | Required | Description | | ------------ | --------------------------------- | -------- | -------------------------------------------------------------------------------------------------- | | name | string | ✅ | Name of the field in the form. | | control | Control<T> | ❌ | React Hook Form's control object. | | label | string | ❌ | Label displayed above the radio group. | | options | RadioOption[] | ❌ | Array of radio button options, each containing value, label, and optional customization props. | | helperText | string | ❌ | Additional text to display below the radio group for information or validation messages. | | onChange | (event, value) => void | ❌ | Callback fired when the value of the radio group changes. | | onBlur | (event) => void | ❌ | Callback fired when the radio group loses focus. | | slotProps | RHFRadioGroupProps["slotProps"] | ❌ | Allows customization of inner components via props. |

RHFDatePicker

The RHFDatePicker is a reusable date picker component that integrates React Hook Form and MUI X Date Picker. It simplifies the creation of date pickers by managing state and validation using React Hook Form, while also allowing customization for Jalali or Gregorian calendars and multi-language support.

Basic usage example

<RHFDatePicker
	name="birthdate"
	control={control}
	label="Select your birthdate"
	rules={{ required: true }}
	dateAdapter="gregorian"
	adapterLocale="en"
	helperText="Please select a date"
/>

Props

The following table lists props specific to RHFDatePicker. For other props, refer to the React Hook Form documentation and MUI X DatePicker documentation.

| Prop | Type | Required | Description | | --------------- | -------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------ | | name | string | ✅ | Name of the field in the form. | | control | Control<T> | ❌ | React Hook Form's control object. | | rules | Object | ❌ | Validation rules for the field, supports React Hook Form validation schema. | | label | string | ❌ | Label for the date picker input field. | | required | boolean | ❌ | Indicates whether the date picker is required for validation. | | dateAdapter | 'jalali' \| 'gregorian' \| MuiPickersAdapter<TDate, TLocale> | ❌ | Specifies the date adapter to use (e.g., Jalali or Gregorian). Defaults to Gregorian if not provided. | | adapterLocale | 'fa' \| 'en' \| TLocale | ❌ | Locale for the date adapter, e.g., fa for Persian or en for English. | | helperText | string | ❌ | Additional text to display below the date picker, often used for validation or informational messages. | | onChange | (newValue: TDate, context?: PickerChangeContext) => void | ❌ | Callback fired when the date picker value changes. |

RHFTimePicker

The RHFTimePicker component is a reusable and customizable time picker built with MUI's TimePicker, integrated with React Hook Form for form validation and state management. It supports both Jalali and Gregorian calendars, as well as localization.

Basic usage example

<RHFTimePicker
	name="time"
	label="time"
	control={control}
	onChange={console.log}
	helperText="time picker sample helper text"
/>

Props

The following table lists props specific to RHFTimePicker. For other props, refer to the React Hook Form documentation and MUI X TimePicker documentation.

| Prop Name | Type | Required | Description | | ------------------ | ------------------------------------------------ | -------- | -------------------------------------------------------------------------- | | name | string | ✅ | Name of the field for React Hook Form. | | control | Control<T> | ❌ | The control object from React Hook Form. | | rules | FieldRules | ❌ | Validation rules for the field. | | defaultValue | any | ❌ | Default value for the field. | | shouldUnregister | boolean | ❌ | Whether to unregister the input on unmount. | | label | string | ❌ | Label for the time picker. | | required | boolean | ❌ | Whether the field is required. | | dateAdapter | 'jalali' \| 'gregorian' \| MuiPickersAdapter | ❌ | Date adapter for the time picker (Jalali, Gregorian, or a custom adapter). | | adapterLocale | 'fa' \| 'en' \| TLocale | ❌ | Locale for the date adapter (supports Persian and English by default). | | helperText | string | ❌ | Additional helper text to display below the picker. | | onChange | (value: Date \| null, context: object) => void | ❌ | Callback triggered when the value changes. | | ampm | boolean | ❌ | Whether to display the time in AM/PM format. Defaults to false. |

RHFDateTimePicker

The RHFDateTimePicker is a reusable datetime picker component that integrates with React Hook Form. It provides localization support for multiple languages (including Gregorian and Jalali calendars), dynamic error handling, and custom helper text.

Basic usage example

<RHFDateTimePicker
	name="dateasd3"
	label="date time"
	control={control}
	helperText="date picker sample helper text"
/>

Props

The following table lists props specific to RHFDateTimePicker. For other props, refer to the React Hook Form documentation and MUI X DateTimePicker documentation.

| Prop | Type | Required | Description | | --------------- | -------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------ | | name | string | ✅ | Name of the field in the form. | | control | Control<T> | ❌ | React Hook Form's control object. | | rules | Object | ❌ | Validation rules for the field, supports React Hook Form validation schema. | | label | string | ❌ | Label for the date picker input field. | | required | boolean | ❌ | Indicates whether the date picker is required for validation. | | dateAdapter | 'jalali' \| 'gregorian' \| MuiPickersAdapter<TDate, TLocale> | ❌ | Specifies the date adapter to use (e.g., Jalali or Gregorian). Defaults to Gregorian if not provided. | | adapterLocale | 'fa' \| 'en' \| TLocale | ❌ | Locale for the date adapter, e.g., fa for Persian or en for English. | | helperText | string | ❌ | Additional text to display below the date picker, often used for validation or informational messages. | | onChange | (newValue: TDate, context?: PickerChangeContext) => void | ❌ | Callback fired when the date picker value changes. | | ampm | boolean | ❌ | Whether to display the time in AM/PM format. Defaults to false. |

RHFAutocomplete

The RHFAutocomplete component integrates React Hook Form with Material-UI's Autocomplete, providing a powerful, customizable, and reusable autocomplete field. It simplifies form state management, validation, and localization while leveraging Material-UI's styling and interaction features.

Basic usage Example

<RHFAutocomplete
	name="selectasd"
	label="ello"
	helperText={'select helpertext sample'}
	control={control}
	multiple
	options={[1, 2, 3]}
	getOptionLabel={(option) => `option ${option}`}
	rules={{ required: true }}
/>

Props

The following table lists include props added by RHFAutocomplete. For other props, refer to the React Hook Form documentation and Material-UI Autocomplete documentation.

| Prop | Type | Required | Description | | ------------------ | ------------------------------------------------ | -------- | ------------------------------------------------------------------------------------------ | | name | string | ✅ | Name of the field in the form. | | control | Control<TFieldValues> | ❌ | React Hook Form's control object. | | rules | RegisterOptions | ❌ | Validation rules for the field. | | options | TValue[] | ❌ | Array of options to display in the autocomplete dropdown. | | multiple | boolean | ❌ | Enables selection of multiple values. Defaults to false. | | label | string | ❌ | Label for the TextField displayed in the autocomplete. | | helperText | string | ❌ | Helper text displayed below the input field. | | variant | 'filled' \| 'outlined' \| 'standard' | ❌ | Sets the variant style of the TextField. | | color | TextFieldProps['color'] | ❌ | Color of the TextField. | | size | TextFieldProps['size'] | ❌ | Size of the TextField. | | placeholder | TextFieldProps['placeholder'] | ❌ | placeholder of the TextField. | | TextFieldProps | TextFieldProps or (params) => TextFieldProps | ❌ | Props to customize the underlying TextField. | | transform | (event, value, reason, details) => TValue | ❌ | Custom function to transform the value before passing it to React Hook Form. | | onChange | (value) => void | ❌ | Callback triggered when the value changes. | | required | boolean | ❌ | Marks the field as required. | | disableClearable | boolean | ❌ | If true, disables the option to clear the selection. Defaults to true. | | freeSolo | boolean | ❌ | If true, allows free text input in addition to selecting an option. Defaults to false. |

RHFSelect

The RHFSelect component is a React Hook Form-integrated dropdown built on top of MUI's Select. It simplifies the process of creating accessible, form-bound select fields with customizable options and MUI styling.

It combines the power of MUI's <Select> with the form management capabilities of react-hook-form.

Basic usage example

<RHFSelect
	name="status"
	control={control}
	label="Select status"
	options={[
		{ label: 'Active', value: 'active' },
		{ label: 'Inactive', value: 'inactive' }
	]}
	helperText="Choose the current status."
/>

Props

The following table lists include props added by RHFSelect. For other props, refer to the React Hook Form documentation and Material-UI Select documentation.

| Prop | Type | Require | Default | Description | | ------------------ | ---------------------------------------------- | ------- | -------------------------------------- | ------------------------------------------------------------ | | name | string | ✅ | - | Name of the field in the form. | | options | SelectOption[] | ✅ | - | Array of options with { label, value }. | | control | Control<TFieldValues> | ❌ | - | React Hook Form's control object. | | rules | RegisterOptions | ❌ | - | Validation rules for the field. | | onChange | (value: string \| boolean \| number) => void | ❌ | - | Custom callback when value changes. | | helperText | ReactNode | ❌ | - | Helper text shown below the select. | | emptyOption | boolean | ❌ | false | Adds an empty item at the top of the list. | | emptyOptionValue | any | ❌ | null | The value of the empty option (useful for nullable selects). | | emptyOptionLabel | ReactNode | ❌ | translate('select.emptyOptionLabel') | The label for the empty option. | | slotProps | object | ❌ | {} | Custom props for internal MUI components. |

Slot Props

Customize the inner MUI components via the slotProps prop.

| Slot | Description | | --------------- | -------------------------------------------------------------- | | formControl | Props for the MUI FormControl component. | | helperText | Props for the MUI FormHelperText component. | | inputLabel | Props for the MUI InputLabel component. | | menuItemProps | Props applied to each MenuItem, excluding value and key. |

RHFMultiSelect

The RHFMultiSelect component is a React Hook Form-integrated multi-value select built on top of MUI's Select. It allows users to select multiple options with additional visual enhancements like checkboxes and chips.

This component is designed to simplify form integration while maintaining flexibility and customization through MUI and RHF capabilities.

Basic usage example

<RHFMultiSelect
	name="roles"
	control={control}
	label="Select roles"
	options={[
		{ label: 'Admin', value: 'admin' },
		{ label: 'Editor', value: 'editor' },
		{ label: 'Viewer', value: 'viewer' }
	]}
	checkbox
	chip
	helperText="You can select multiple roles."
/>

Props

The following table lists props specific to RHFMultiSelect. For additional props, refer to the React Hook Form documentation and Material-UI Select documentation.

| Prop | Type | Require | Default | Description | | ------------- | ----------------------------------- | ------- | ------- | ------------------------------------------------ | | name | string | ✅ | - | Name of the field in the form. | | options | MultiSelectOption[] | ✅ | - | Array of options with { label, value }. | | control | Control<TFieldValues> | ❌ | - | React Hook Form's control object. | | rules | RegisterOptions | ❌ | - | Validation rules for the field. | | onChange | (value: MultiSelectValue) => void | ❌ | - | Custom callback when value changes. | | helperText | ReactNode | ❌ | - | Helper text shown below the select. | | placeholder | ReactNode | ❌ | - | Placeholder text shown when no item is selected. | | checkbox | boolean | ❌ | false | Shows a checkbox next to each option. | | chip | boolean | ❌ | false | Displays selected items as chips in the input. | | slotProps | object | ❌ | {} | Custom props for internal MUI components. |

Slot Props

Customize internal components using the slotProps prop.

| Slot | Description | | --------------- | --------------------------------------------- | | formControl | Props for the MUI FormControl component. | | helperText | Props for the MUI FormHelperText component. | | inputLabel | Props for the MUI InputLabel component. | | menuItemProps | Props applied to each MenuItem. | | checkbox | Props applied to each MUI Checkbox. | | chip | Props applied to each MUI Chip. |

RHFLocationPicker

The RHFLocationPicker component integrates React Hook Form with LocationPicker component, providing a customizable, reusable location picker field with form state management, validation, and localization support.

for using this component import leaflet styles in your project:

import 'leaflet/dist/leaflet.css';

Basic usage Example

<RHFLocationPicker
	name="location"
	control={control}
	label="your location"
	helperText="pick your location on map"
	rules={{ required: true }}
/>

Props

The following table lists the props added by RHFLocationPicker. For other props, refer to the React Hook Form documentation.

| Prop | Type | Required | Description | | ------------- | ---------------------------------- | -------- | -------------------------------------------------------------- | | name | string | ✅ | Name of the field in the form. | | control | Control<TFieldValues> | ❌ | React Hook Form's control object. | | rules | RegisterOptions | ❌ | Validation rules for the field. | | label | ReactNode | ❌ | Label for the location field. | | helperText | ReactNode | ❌ | Helper text displayed below the map. | | error | boolean | ❌ | Error state for the form control. | | required | boolean | ❌ | Marks the field as required. | | onChange | (value: LatLngLiteral) => void | ❌ | Called when the user picks a location. | | disabled | boolean | ❌ | Disables the picker. | | zoom | number (default: 15) | ❌ | Initial zoom level of the Leaflet map (MapContainer prop). | | ref | Ref<Map> | ❌ | Ref to the MapContainer instance. | | slotProps | LocationPickerProps["slotProps"] | ❌ | Props for inner components (formControl, mapWrapper, etc.). | | slots | LocationPickerProps["slots"] | ❌ | Custom nodes (e.g. floatingMarker). |

Inherits additional props from MapContainer (except children and center).

RHFUpload

The RHFUpload component integrates React Hook Form with Upload, providing a customizable, reusable file upload field with form state management, validation, and localization support.

It accepts all props from Upload except value, error, disabled, onDrop, onDelete, onRemove, onRemoveAll, and onUpload (managed internally or via RHF-specific callbacks).

Basic usage Example

<RHFUpload
	name="uploadField"
	control={control}
	label="Upload File"
	helperText="Select a file to upload"
	multiple={false}
	rules={{ required: 'File upload is required' }}
	onChange={(value) => console.log(value)}
/>

Props

The following table lists the props added by RHFUpload. For other props, refer to the React Hook Form documentation.

| Prop | Type | Required | Description | | ---------------- | -------------------------------------------- | -------- | ---------------------------------------------------------------------------- | | name | string | ✅ | Name of the field in the form. | | control | Control<TFieldValues> | ❌ | React Hook Form's control object. | | rules | RegisterOptions | ❌ | Validation rules for the field. | | multiple | boolean | ❌ | Enables selection of multiple files. | | label | string | ❌ | Label for the file upload field. | | helperText | string | ❌ | Helper text displayed below the upload field. | | required | boolean | ❌ | Marks the field as required. | | onChange | (value) => void | ❌ | Called when selected file(s) change. | | onUpload | (value) => void | ❌ | Called when upload action is triggered. | | transform | (value) => File \| File[] \| Promise<...> | ❌ | Transforms file value before updating form state. | | disabled | boolean | ❌ | Disables the upload field. |

All other Upload props (e.g. accept, maxFiles, thumbnail, slotProps) can be passed through.

RHFCodeField

The RHFCodeField component integrates React Hook Form with CodeField.

Basic usage Example

<RHFCodeField
	label="one time password"
	name="otp"
	length={5}
	helperText="helper text"
	rules={{
		required: true
	}}
/>

Props

The RHFCodeField accepts all props from CodeField, except:

• value
• error

These are managed internally via React Hook Form's useController.

It also supports all props from useController, such as:

| Prop | Type | Description | | -------------- | ----------------------- | -------------------------------------------- | | name | string | Name of the form field. | | control | Control<TFieldValues> | Control object from useForm. | | rules | RegisterOptions | Validation rules (e.g., required, minLength) | | defaultValue | string | Default value for the field. |

TextField

The TextField component wraps MUI's TextField with Remate-specific behavior: automatic RTL/LTR direction, nullable empty strings, and trim-on-blur.

Basic usage example

<TextField
	label="Name"
	value={name}
	onChange={(value) => setName(value)}
	nullable
	autoDirection
/>

Props

In addition to MUI TextField props (except onChange), the following props are supported:

| Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | autoDirection | boolean | true | Sets dir on the input based on typed text (via isRtlText). | | nullable | boolean | true | Treats empty string as null in onChange. | | trim | boolean | true | Trims whitespace on blur. | | onChange | (value, event) => void | – | Receives parsed value (string \| null when nullable). |

Password

The Password component extends TextField with a show/hide password toggle. See RHFPassword for the React Hook Form variant.

Basic usage example

<Password
	label="Password"
	value={password}
	onChange={setPassword}
	showPasswordTogglerButtonPosition="end"
/>

Props

Supports all TextField props except select, plus:

| Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | showPasswordTogglerButtonPosition | 'end' \| 'start' | 'end' | Position of the visibility toggle button. | | slots | { showPasswordIcon?, hidePasswordIcon? } | {} | Custom icon components. | | slotProps | { showPasswordIcon?, hidePasswordIcon?, showPasswordTogglerButton? } | {} | Props for icons and toggle IconButton. |

autoDirection defaults to false for password fields.

Checkbox

Standalone checkbox with label and helper text, built on MUI Checkbox.

Basic usage example

<Checkbox
	label="Accept terms"
	value={accepted}
	onChange={(e, checked) => setAccepted(checked)}
	helperText="You must accept to continue"
/>

Props

| Prop | Type | Description | | ---- | ---- | ----------- | | label | string | Label next to the checkbox. | | required | boolean | Marks the field as required. | | helperText | ReactNode | Text below the control. | | value | boolean | Checked state. | | error | boolean | Error state. | | slotProps | { formControlLabel?, helperText?, formControl? } | Inner component props. |

Also supports standard MUI Checkbox props (except value / checked — use value as boolean).

Switch

Standalone switch with label and helper text, built on MUI Switch. See RHFSwitch for the form-bound variant.

Basic usage example

<Switch
	label="Enable notifications"
	value={enabled}
	onChange={(e, checked) => setEnabled(checked)}
/>

Props

Same shape as Checkbox props (label, required, helperText, value, error, slotProps), with MUI Switch behavior.

Select

The Select component is a typed MUI Select with option list support, empty option, and localization for the empty label.

Basic usage example

<Select
	label="Status"
	value={status}
	onChange={setStatus}
	options={[
		{ label: 'Active', value: 'active' },
		{ label: 'Inactive', value: 'inactive' }
	]}
	emptyOption
/>

Props

| Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | options | SelectOption[] | – | { label, value, menuItemProps? }[] (required). | | value | option value | empty value | – | Current selection (required). | | onChange | (value, event, child) => void | – | Change handler. | | emptyOption | boolean | false | Adds an empty item at the top. | | emptyOptionValue | any | null | Value for the empty option. | | emptyOptionLabel | ReactNode | localized | Label for the empty option. | | placeholder | ReactNode | – | Placeholder when nothing is selected. | | helperText | ReactNode | – | Helper text below the select. | | slotProps | { formControl?, helperText?, inputLabel?, menuItemProps? } | – | Inner MUI component props. |

Also supports MUI Select props (except onChange / value).

MultiSelect

Multi-value select with optional checkboxes and chips for selected items.

Basic usage example

<MultiSelect
	label="Roles"
	value={roles}
	onChange={setRoles}
	options={[
		{ label: 'Admin', value: 'admin' },
		{ label: 'Editor', value: 'editor' }
	]}
	checkbox
	chip
/>

Props

| Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | options | MultiSelectOption[] | – | Options list (required). | | value | array of option values | – | Selected values (required). | | onChange | (value, event, child) => void | – | Change handler. | | checkbox | boolean | false | Show checkbox per option. | | chip | boolean | false | Render selected values as chips. | | placeholder | ReactNode | – | Shown when nothing is selected. | | helperText | ReactNode | – | Helper text. | | slotProps | { formControl?, helperText?, inputLabel?, menuItemProps?, checkbox?, chip? } | – | Inner component props. |

Date Pickers

Standalone date/time pickers built on MUI X Date Pickers. Each picker wraps PickersLocalizationProvider for Jalali/Gregorian calendar support.

DatePicker

<DatePicker
	label="Birth date"
	value={date}
	onChange={setDate}
	dateAdapter="jalali"
	adapterLocale="fa"
/>

| Prop | Type | Description | | ---- | ---- | ----------- | | dateAdapter | 'jalali' \| 'gregorian' \| MuiPickersAdapter | Calendar system. | | adapterLocale | 'fa' \| 'en' \| TLocale | Locale for the adapter. | | required | boolean | Required field. | | error | boolean | Error state. | | helperText | string | Helper text. | | variant / size / color | MUI TextField | Field appearance. | | onBlur | () => void | Blur handler. |

Plus all MUI DatePicker props.

TimePicker

<TimePicker
	label="Meeting time"
	value={time}
	onChange={setTime}
	ampm={false}
/>

Same localization props as DatePicker, plus MUI TimePicker props (including ampm).

DateTimePicker

<DateTimePicker
	label="Appointment"
	value={dateTime}
	onChange={setDateTime}
/>

Combines date and time picking with the same dateAdapter / adapterLocale props and MUI DateTimePicker API.

PickersLocalizationProvider

Low-level provider used internally by date pickers. Can be used directly when composing custom picker UIs.

| Prop | Type | Description | | ---- | ---- | ----------- | | dateAdapter | 'jalali' \| 'gregorian' \| MuiPickersAdapter | Calendar adapter class or preset. | | adapterLocale | 'fa' \| 'en' \| TLocale | date-fns locale object or shorthand. | | children | ReactNode | Pickers to render inside the provider. |

Defaults: if dateAdapter is omitted, fa language uses Jalali adapter; otherwise Gregorian. Locale follows adapterLocale, LocalizationProvider language, or en.

Spin

The Spin component is a component that displays a loading indicator while dimming its child content. It’s ideal for scenarios where you need to communicate loading or processing states to the user.

Props

| Name | Type | Default | Required | Description | | ----------- | ----------------- | -------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------- | | children | React.ReactNode | – | ✅ | Content to wrap with the loading overlay. | | spinning | boolean | true | ❌ | Controls the loading state. When true, the spinner is displayed, and child components are dimmed. | | indicator | React.ReactNode | A default spinner with three dots animation. | ❌ | The loading indicator to display while spinning is true. |

Basic usage example

import React, { useState } from 'react';
import { Spin } from '@remate/components';
import { Button, Box } from '@mui/material';

function App() {
	const [loading, setLoading] = useState(false);

	const toggleLoading = () => setLoading(!loading);

	return (
		<Box>
			<Spin spinning={loading}>
				<Box p={2}>
					<h1>Content Area</h1>
					<p>This is the main content. It will be dimmed when loading.</p>
				</Box>
			</Spin>
			<Button
				variant="contained"
				color="primary"
				onClick={toggleLoading}
			>
				{loading ? 'Stop Loading' : 'Start Loading'}
			</Button>
		</Box>
	);
}

export default App;

LocationPicker

this component use for pick a location on map using Leaflet.

for using this component import leaflet styles in your project:

import 'leaflet/dist/leaflet.css';

Props

| Prop | **