Package:
@react-form-builder/components-rsuite
· Source
code
Introduction
The AutoComplete component, as its name suggests, enables you to add an auto-complete to
your form.
This component is included within
the following NPM package: @react-form-builder/components-rsuite.
The following instructions showcase configuration and customization of the auto-complete component. Explore the various properties and options
available to tailor its behavior and appearance to your requirements.
Main properties
The following general properties are available within the Main tab:
| Name | Type | Description |
|---|
| Key | string | A unique key (name) for you auto-complete |
| Label | string | Provide a title for your component |
| Placeholder | string | Specify placeholder for the auto-complete field. Will not visible if a Value is provided |
| Data | string | Used to define values and labels for your auto-complete list. Add more options by using the corresponding (+) button |
| Default value | Date | Sets a default value (default date) for your auto-complete |
| Value | Date | Sets a controlled value for your auto-complete |
| Disabled | boolean | Disables the component |
| Read Only | boolean | If set to true, makes your component unavailable for users to interact with |
| Size | choice | Sets the size of the input field (e.g., large, small, etc. ) |
| Filter by | function | Custom filter rules (will only display items that value is a substring of which by default) |
| Menu class name | string | A CSS class to apply to the Menu DOM |
| Select on Enter | boolean | When set to false, the Enter key selection function is invalid |
Style properties
These are properties that allow to customize the size, color and other style properties of your component:
-
For Device: You can provide component’s style customization for all devices or specific
devices by using this dropdown list. Refer to Adaptive Layout for more
details.
-
Component > Class Name: Add a class name for your component for the subsequent styling if necessary.
-
Wrapper: The options below enable you to tailor the appearance of your component and customize
it for a specific device type, as selected in the For Device property:
| Name | Type | Description |
|---|
| Width | number | Specifies the width for your component |
| Height | number | Specifies the height for your component |
| Margin top/right/bottom/left | number | Margin values for you component |
| Color | string | Allows customizing the text color |
| Background color | string | Enables customizing the background color |
Last modified on April 16, 2026
