Preview

Usage

The items and definition properties must be set via JavaScript:

<cs-attribute-editor add-button-text="Add new tag"></cs-attribute-editor>

<script>
  const editor = document.querySelector('cs-attribute-editor');
  editor.definition = [
    { label: 'Key', control: (item) => item.key },
    { label: 'Value', control: (item) => item.value },
  ];
  editor.items = [
    { key: 'Environment', value: 'Production' },
    { key: 'Team', value: 'Frontend' },
  ];
</script>

Properties

add-button-textstringrequired

Specifies the text that's displayed in the add button.

add-button-variantAttributeEditorProps.AddButtonVariant

Specifies the variant to use for the add button. By default a normal button is used. Use inline-link when using an attribute editor nested inside complex attribute editing with expandable sections.

custom-row-actions(props: AttributeEditorProps.RowActionsProps<T>) => unknown

Specifies a custom action trigger for each row, in place of the remove button. Only button and button dropdown components are supported. If you provide this, removeButtonText, removeButtonAriaLabel, and onRemoveButtonClick will be ignored. The trigger must be given the provided ref in order for focusRemoveButton to work. The function receives the following properties:

• item: The item being rendered in the current row.
• itemIndex (number): The index of the item.
• ref (ReactRef): A React ref that should be passed to the rendered button.
• breakpoint (Breakpoint): The current breakpoint, for responsive behavior.
• ownRow (boolean): Whether the button is rendered on its own row.

definitionReadonlyArray<AttributeEditorProps.FieldDefinition<T>>required

Defines the editor configuration. Each object in the array represents one form field in the row. If more than 6 attributes are specified, a gridLayout must be provided.

• label (unknown) - Text label for the form field.
• description (unknown) - Additional description for the form field.
• info (unknown) - Info link for the form field.
• errorText ((item, itemIndex) => unknown) - Error message text to display as a control validation message. It renders the form field as invalid if the returned value is not null or undefined.
• warningText ((item, itemIndex) => unknown) - Warning message text to display as a control validation message. It renders the form field in a warning state if the returned value is not null or undefined.
• constraintText ((item, itemIndex) => unknown) - Text to display as a constraint message below the field.
• control ((item, itemIndex) => unknown) - A control to use as the input for the field.

disable-add-buttonboolean default: false

Determines whether the add button is disabled.

grid-layoutReadonlyArray<AttributeEditorProps.GridLayout>

Optionally specifies the layout of the attributes. By default, all attributes will be equally spaced and wrapped into multiple rows on smaller viewports.

A gridLayout is an array of breakpoint definitions. Each definition consists of:

• rows (number[][]): the rows in which to display the attributes. Each row consists of a list of numbers indicating the relative width of each attribute. For example, [[1, 1, 1, 1]] is a single row of four evenly-spaced attributes, or [[1, 2], [1, 1, 1]] splits five attributes onto two rows.
• breakpoint (string): optionally specifies that the given entry should only be used when at least that much width is available.
• removeButton: optionally configures the remove (or row action) button placement. If this is not provided, the button will be placed at the end of a single row, or below if multiple rows are present. The removeButton property supports contains two properties:
  • ownRow (boolean): forces the remove button onto its own row.
  • width (number | 'auto'): a number indicating the relative width (equivalent to a rows entry), or 'auto' to fit to the button width.

hide-add-buttonboolean

Determines whether the add button is hidden

i18n-stringsAttributeEditorProps.I18nStrings<T>

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

is-item-removableAttributeEditorProps.IsItemRemovableFunction<T>

Function that determines whether an item is removable. When this function returns false, the remove button is not rendered and the user can't remove the item. By default, all items are removable.

itemsReadonlyArray<T> default: []

Specifies the items that serve as the data source for all rows. The display of a row is handled by the definition property.

remove-button-aria-label(item: T) => string

Adds an aria-label to the remove button.

remove-button-textstring default: 'Remove'

Specifies the text that's displayed in the remove button.

Slots

additionalActions

Specifies additional actions displayed next to the add-button (or instead of the add-button if hidden).

additionalInfo

Displayed below the add button. Use it for additional information related to the attribute editor.

empty

Displayed when there are no items to display.

Events

addButtonClickCustomEvent<void>

Called when add button is clicked.

removeButtonClickCustomEvent<AttributeEditorProps.RemoveButtonClickDetail>

Called when remove button is clicked. The event detail contains the index of the corresponding item.