What does the component do?

It contains the chip component.

When should the component be used?

• Only in combination with the chip component.

The sbb-chip-group component is a container for one or multiple sbb-chip.
Generally, it is used in combination with an sbb-form-field to allow the input of multiple string values.

The value property reflects the list of slotted chips. Adding or removing an sbb-chip updates the value property, and vice versa.

<sbb-form-field>
  <label>Field label</label>
  <sbb-chip-group name="field-name">
    <sbb-chip value="Value 1"></sbb-chip>
    ...
    <input />
  </sbb-chip-group>
</sbb-form-field>

Slots

Use the unnamed slot to provide the sbb-chip and the input field.

States

The sbb-chip-group has a disabled and a readonly state and reacts to the respective input properties.
The disabled/readonly properties are proxied to the slotted sbb-chips.

<sbb-form-field>
  <sbb-chip-group name="field-name">
    <sbb-chip value="Value 1"></sbb-chip>
    ...
    <input disabled />
    <!-- Or -->
    <input readonly />
  </sbb-chip-group>
</sbb-form-field>

Style

The sbb-chip-group has a negative variant. If within an sbb-form-field, the properties automatically sync.

<sbb-form-field negative>
  <sbb-chip-group name="field-name">
    <sbb-chip value="Value 1"></sbb-chip>
    ...
    <input />
  </sbb-chip-group>
</sbb-form-field>

Usage

By default, when the user presses Enter, the sbb-chip-group will create a new sbb-chip and add it to the slotted elements.

Consumers can customize or prevent this behavior by listening to the chipinputtokenend event.

<!-- Preventing the event will stop the chip-group from converting the input value into a chip -->
<sbb-chip-group name="field-name" @chipinputtokenend="${(ev)" ="">
  ev.preventDefault()}> ...
  <input />
</sbb-chip-group>

<!-- Use the event.detail object to override the default behavior -->
<sbb-chip-group
  name="field-name"
  @chipinputtokenend=${(ev: CustomEvent<SbbChipInputTokenEndEventDetails>) => {
    ev.detail.setValue(transformedValue);
    ev.detail.setLabel('Custom label');
  }}>
  ...
  <input />
</sbb-chip-group>

Use within forms

The sbb-chip-group is a form-associated element that can be part of a form. Its value is an array of strings.

Note: The name must be set on the sbb-chip-group, not on the input

<form>
  <sbb-form-field>
    <sbb-chip-group name="field-name">
      <sbb-chip value="Value 1"></sbb-chip>
      ...
      <input />
    </sbb-chip-group>
  </sbb-form-field>
</form>

Use with Autocomplete

It is possible to combine the functionalities of chip-group and the sbb-autocomplete.

In this scenario, selecting an option will create a new chip using the option value.

<sbb-form-field>
  <sbb-chip-group name="field-name">
    <sbb-chip value="Value 1"></sbb-chip>
    ...
    <input />
  </sbb-chip-group>
  <sbb-autocomplete>
    <sbb-option value="Option A">Option A</sbb-option>
    ...
  </sbb-autocomplete>
</sbb-form-field>

Custom 'separator-keys'

By default, the sbb-chip-group creates a new chip on Enter key press.

Consumers can customize the array of keys that will trigger the chip creation by using the separatorKeys property.

<sbb-chip-group name="field-name" separator-keys='["Enter", "Space"]'> ... </sbb-chip-group>

Keyboard interaction

At any time, only a single chip (usually, the last one) is focusable and part of the tab order. Users can move between them using the arrow keys.

Accessibility

The sbb-chip-group follows the grid aria pattern.

Complex Values

This component supports any types of values, including complex objects.
The type can be specified using the generic type parameter T of SbbChipGroup<T>.

To render the complex value, the displayWith function can be used to map
the value to a string represented in the created chips.

Please note that the parameter is the assigned value of the selected option which does not necessarily
align with the type information.

<sbb-form-field>
  <label>Label</label>
  <sbb-chip-group
    name="chip-group-1"
    .displayWith=${(value) => value.property}
    .value=${[{property: 'Option 1', otherProp: 'test'}]}
  >
    <input placeholder="Placeholder" />
  </sbb-chip-group>
  <sbb-autocomplete>
    <sbb-option .value=${{property: 'Option 3', otherProp: 'test'}}>Option 3</sbb-option>
    <sbb-option .value=${{property: 'Option 4', otherProp: 'test'}}>Option 4</sbb-option>
  </sbb-autocomplete>
</sbb-form-field>

Properties

Methods

Events

Slots