RHFTagsInput

RHFTagsInput is a customized version of TextField designed for entering and managing keyword-based inputs. Each keyword is visually represented as a Chip, offering a cleaner, more interactive experience than comma-separated values in a standard text field.

Working

RHFTagsInput works as follows:

Users can type a keyword, press Enter or the delimiter key (default ","), and see it rendered as a chip, with the input field cleared for the next entry.
Pasting comma-separated values automatically generates chips for each value. The delimiter can also be configured, for example "|".
Users can remove a chip by clicking its "x" button.
Pressing the Backspace or Delete key when the input is empty removes the last chip.
When the field is unfocused, only the first two chips are displayed by default. This can be customized via the limitTags prop, with -1 showing all chips.

Usage

import RHFTagsInput, { RHFTagsInputProps } from '@nish1896/rhf-mui-components/mui/tags-input';

<RHFTagsInput
  fieldName="tags"
  control={control}
/>

Tag Events

Use onTagAdd, onTagDelete, and onTagPaste to validate, transform, or prevent tag changes before the form value is updated. Each callback receives a single object argument with the current field value available as currentValue.

<RHFTagsInput
  fieldName="tags"
  control={control}
  onTagAdd={({ newTag, currentValue }) => {
    if (newTag.length < 3 || currentValue.includes(newTag)) {
      return false;
    }
  }}
  onTagDelete={({ deletedTag }) => {
    if (deletedTag.includes('sh')) {
      return false;
    }
  }}
  onTagPaste={({ pastedTags }) => (
    pastedTags.filter(tag => tag.length >= 3)
  )}
/>

Examples

API

The RHFTagsInputProps interface extends TextFieldProps and includes the following additional props. Props marked with * are required.

Name	Type	Description
`fieldName`*	`string`	Name of the field registered with React Hook Form. This prop is required for all components.
`control`*	UseFormControl	The control option yielded on calling the useForm hook.
`registerOptions`	`RegisterOptions`	React Hook Form validation rules. Useful when not using a schema validation library such as Yup or Joi.
`onValueChange`	`({ newValue }) => void`	An optional callback function that returns all tags present in the input.
`onTagAdd`	`({ currentValue, newTag }) => boolean / string / void`	Callback function triggered before a tag is added by pressing Enter or the configured delimiter key. Receives the tag being added and the current field value. Return `false` to prevent the tag from being added. Return a string to replace the original tag value before it is added.
`onTagDelete`	`({ currentValue, deletedTag }) => boolean / void`	Callback function triggered before a tag is removed. Receives the tag being deleted and the current field value. Return `false` to prevent the tag from being deleted.
`onTagPaste`	`({ currentValue, pastedTags }) => boolean / string[] / void`	Callback function triggered when tags are pasted into the input. The pasted text is split using the configured delimiter, trimmed, and deduplicated before this callback is invoked. Receives the parsed tags and the current field value. Return `false` to prevent all pasted tags from being added, or return a string array to replace the parsed tags.
`delimiter`	`string`	Character used to separate tags when typing or pasting. Pressing the delimiter key commits the current input as one or more tags, and pasted values are split using the same delimiter.
`maxTags`	`number`	Maximum number of tags that can be added. Once the limit is reached, additional tags entered from the keyboard are ignored, and pasted tags are truncated to the remaining available slots.
`label`	`ReactNode`	The text to render in the FormLabel component. By default, the value of `fieldName` is transformed (e.g., "firstName" to "First Name") using the fieldNameToLabel function.
`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.
`hideLabel`	`boolean`	Hides the FormLabel component if you don’t want to display the default form label component or prefer to render a fully custom label instead.
`ChipProps`	ChipProps	Props to customise the Chip component for each input tag.
`limitTags`	`number`	Maximum number of tags to show when the input is not focused. Provide value as `-1` to show all tags. Default value is `2`.
`getLimitTagsText`	`(hiddenTags: number) => ReactNode`	Custom renderer for the summary label displayed when tags are hidden.
`renderError`	`(error: FieldError) => ReactNode`	Custom renderer for the React Hook Form field error. Receives the current field error and returns the content to display, such as `error.message` or a custom React element in the `HelperText` component. Added in `v4.1.0`.
`hideErrorMessage`	`boolean`	A flag to prevent replacement of helper text of a field by the `errorMessage` when the validation is triggered.
`helperText`	`ReactNode`	The content to display within the FormHelperText component below the field. If the field validation fails, this content will be overridden by the corresponding error message.
`formHelperTextProps`	FormHelperTextProps	FormHelperTextProps to customise FormHelperText component for a field. 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.

Source Code

View the full implementation of this component on GitHub.

Number Input

File Uploader