Preview

Usage

The tags property must be set via JavaScript:

<cs-tag-editor></cs-tag-editor>

<script>
  const editor = document.querySelector('cs-tag-editor');
  editor.tags = [
    { key: 'Environment', value: 'Production', existing: true },
    { key: 'Team', value: 'Frontend', existing: false },
  ];
</script>

Properties

allowed-character-patternstring default: ''

Specifies a regular expression string that overrides the default acceptable character validation. You should use this property only when absolutely necessary.

i18n-stringsTagEditorProps.I18nStrings

An object containing all the necessary localized strings required by the component.

keys-request(key: string) => Promise<ReadonlyArray<string>>

Specifies a function that returns all the keys for a resource. The expected return type of the function should be a promise that resolves to a list of strings of all the keys (for example, ['key1', 'key2']).

loadingboolean default: false

Renders the component in a loading state.

tag-limitnumber

Specifies the maximum number of tags that a customer can add.

tagsReadonlyArray<TagEditorProps.Tag> default: []

Specifies an array of tags that are displayed to the user. Each tag item has the following properties:

• key (string) - The key of the tag that's displayed in the corresponding key field.
• value (string) - The value of the tag that's displayed in the corresponding value field.
• existing (boolean) - Specifies if this is an existing tag for the resource. When set to true, if the tag is deleted its markedForRemoval property is to true. When set to false, deletion of the tag removes the tag from the tags list.
• markedForRemoval (boolean) - Specifies if this tag has been marked for removal. This property is set to true by the component when a user removes an existing tag. The item will remain in the tags list. When set to true, the user is presented with the option to undo the removal operation.
• valueSuggestionOptions (Array<AutosuggestProps.Option>) - An array of autosuggest suggestion options associated with the specified tag key.

values-request(key: string, value: string) => Promise<ReadonlyArray<string>>

Specifies a function that returns all the values for a specified key of a resource. The expected return type of the function should be a promise that resolves to a list of strings of all the values (for example, ['value1', 'value2']).

You should return a rejected promise when the key parameter is an empty string.

Events

changeCustomEvent<TagEditorProps.ChangeDetail>

Called when any tag operation occurs. The event detail object contains the full updated state of tags, and whether the component is in a valid state.