Auto-Complete
The Autocomplete component provides an enhanced input field with autocomplete functionality using Material-UI's Autocomplete component. It supports single and multiple selections, custom options, and additional actions.
Examples
Autocomplete with multiple selection and tag limit.
Form Data:
{}props
meta object
The meta object contains properties that define the display characteristics and behavior of the section.
| Name | Description | Type |
|---|---|---|
| name | The unique identifier for the checkbox control instance. | string |
| displayName | The name to display as the section header | string |
| description | A description text to display under the header | string |
| displayProps | Additional properties to control display settings | object |
| validation | Validation rules for the section | object |
| options | The options to display in the dropdown | array |
| dependencies | Conditions that must be met for the section to be displayed | object |
| value | The default values for the autocomplete field | string |
| isDisabled | Whether the field is disabled | boolean |
| className | Additional CSS class names to apply to the section | string |
| config | Additional configuration for the autocomplete field | object |
| readOnly | A readonly field is not editable and value cannot be changed | boolean |
| htmlProps | Custom properties to apply to the component | object |
config Object
| Name | Description | Type |
|---|---|---|
| multiple | Allow users to select multiple options | boolean |
| limitTags | The maximum number of tags to allow. Defaults to 3 if not specified | integer |
htmlProps Object
| Name | Description | Type |
|---|---|---|
| showAddNew | show add new button as right label element | boolean |
| allowDynamic | Enable Static or dynamic input for array input | boolean |
Common Validation Properties
| Field | Description |
|---|---|
| required | Marks a field as mandatory |
| pattern | Adds a pattern validation for the field. For email, pattern is supported by default |
| patternDetail | Contains info msg and error msg for pattern validation property |
| min | For Textbox fields, it is the minimum number of characters required for the field. For number fields, it is the minimum value allowed |
| max | For Textbox fields, it is the maximum number of characters allowed. For number fields, it is the maximum value allowed |
| minDetail | Contains error and info msg for min validation property |
| maxDetail | Contains error and info msg for max validation property |
| requiredDetail | Contains info msgs about the required validation property |