Dynamic input

Use to add several items inside a list

Code


                                                        
                                                        
                                                            <PyxisDynamicInput 
                                                          id="dynamic-input-id"
                                                          delimiters="[' ', ';', ',']"
                                                          correct-values="[{value: 'test.com', chipsType: 'domain'}]"
                                                          invalid-values="[{value: 'Invalid', chipsType: '', errorType: "invalidFormat"}]"
                                                          error-message-keys="{'invalidFormat': 'Invalid format'}"
                                                          placeholder="Placeholder"
                                                          action-button-label="Validate"
                                                          >
                                                        </PyxisDynamicInput>

Example of a DynamicInput component

Props

The DynamicInput component supports the following props:

Name	Type	Default	Required
id	string	undefined	true
delimiters	string[]	undefined	true
correctValues	```{ value: string chipsType: string }[]	undefined	true
invalidValues	{ value: string errorType?: string chipsType: string }[]	undefined	true
errorMessageKeys	{ (errorType) string: string .... }	undefined	true
placeholder	string	undefined	true
actionButtonLabel	string	undefined	true
canBypassPreactivation	boolean	false	false
preactivationLabel	string	undefined	false
cancelButtonLabel	string	undefined	false
canDisplayBadges	boolean	false	false
errorMessage	string	undefined	false
labelledBy	string	undefined	false
badgeTypes	{ label: string type: string color: 'primary'\|'secondary'\|'warning'\|'danger'\|'success'\|'premium'\|'earth'\|'neptune'\|'jupiter'\|'cloudy'\|'system'\|'neutral'\|'brand' quantity: number }[]	undefined	false
dataTestid	string	undefined	false

Events

The interactions on the DynamicInput component are handled by the following Events

@user-input : This event is emitted when the component's state or data is updated.

@remove-valid-chip : This event is triggered when the delete button of a valid Chip is clicked.

@remove-invalid-chip : This event is emitted when the delete button of an invalid Chip is clicked.

@validate-action : This event is triggered when the button for validating Chips is clicked.

@cancel : This event is triggered when the cancel button is clicked to return to the pre-activation stage.

Exposed Functions

openDynamicInput() : force dynamicInput opening to bypass pre-activation

closeDynamicInput() : force dynamicInput closing to return to pre-activation