RHFTagsInput

RHFTagsInput is an 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 compared to comma-separated values in a standard text field.

Working

The functionality of RHFTagsInput is as follows:

• Users can type a keyword, press Enter, 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.
• Users can remove a chip by clicking its "x" button.
• Pressing 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}
  errorMessage={errors?.tags?.message}
/>

Examples

• RHFTagsInput
• TextField
• Chip
• Complete Form

API

The RHFTagsInputProps interface extends TextFieldProps and includes the following additional props:

Name	Type	Required	Description
fieldName	string	✅	React Hook Form requires name as a key for the registration process. This is a required prop for all components.
control	UseFormControl	✅	The control option yielded on calling the useForm hook.
registerOptions	RegisterOptions		Register options for validation if using react-hook-form without any validation libraries like yup or Joi.
onValueChange	(tags: string[]) => void		An optional callback function that returns an array of strings.
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".
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.
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. The default value is 2. Provide value as -1 to show all tags.
getLimitTagsText	(hiddenTags: number) => ReactNode		The label to display when the tags are truncated
errorMessage	ReactNode		Error message to be shown for a field in FormHelperText component.
hideErrorMessage	boolean		A flag to prevent replacement of helper text of a field by the error message when the validation is triggered.
formHelperTextProps	FormHelperTextProps		FormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component.