Preview

Usage

<cs-token-group id="my-tokens"></cs-token-group>
<script>
  document.getElementById('my-tokens').items = [
    { label: 'Tag A', dismissLabel: 'Remove Tag A' },
    { label: 'Tag B', dismissLabel: 'Remove Tag B' },
  ];
</script>

Properties

alignmentTokenGroupProps.Alignment default: 'horizontal'

Specifies the direction in which tokens are aligned (horizontal | vertical).

disable-outer-paddingboolean default: false

Removes any outer padding from the component. We recommend to always enable this property.

i18n-stringsTokenGroupProps.I18nStrings

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

itemsReadonlyArray<TokenGroupProps.Item> default: []

An array of objects representing token items. Each token has the following properties:

• label (string) - Title text of the token.
• description (string) - (Optional) Further information about the token that appears below the label.
• disabled [boolean] - (Optional) Determines whether the token is disabled.
• labelTag (string) - (Optional) A label tag that provides additional guidance, shown next to the label.
• tags [string[]] - (Optional) A list of tags giving further guidance about the token.
• dismissLabel (string) - (Optional) Adds an aria-label to the dismiss button.
• iconName (string) - (Optional) Specifies the name of an icon to display in the token.
• iconAlt (string) - (Optional) Specifies alternate text for a custom icon, for use with iconUrl.
• iconUrl (string) - (Optional) URL of a custom icon.
• iconSvg (unknown) - (Optional) Custom SVG icon. Equivalent to the svg slot of the icon component.

limitnumber

Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.

limit-show-fewer-aria-labelstring default: ''

Adds an aria-label to the "Show fewer" button. Use to assign unique labels when there are multiple token groups with the same limitShowFewer label on one page.

limit-show-more-aria-labelstring default: ''

Adds an aria-label to the "Show more" button. Use to assign unique labels when there are multiple token groups with the same limitShowMore label on one page.

read-onlyboolean default: false

Specifies if the control is read-only, which prevents the user from modifying the value. A read-only control is still focusable.

Events

dismissCustomEvent<TokenGroupProps.DismissDetail>

Called when the user clicks on the dismiss button. The token won't be automatically removed. Make sure that you add a listener to this event to update your application state.