What does the component do?
It is part of the autocomplete-grid-row component.
When should the component be used?
- Only within the autocomplete-grid-row component.
| Number | Type | Description | Optional | Info |
|---|---|---|---|---|
| 1 | Component | sbb-form-field | No | |
| 1a | Standard-HTML | label | No | |
| 1b | Standard-HTML | input | No | |
| 1c | Component | sbb-icon | Yes | Prefix |
| 1d | Component | sbb-icon | Yes | Suffix |
| 2 | Component | sbb-autocomplete-grid-optgroup | Yes | |
| 2a | Text | Label | No | |
| 2b | Component | sbb-divider | - | Appears with an sbb-autocomplete-grid-optgroup |
| 3 | Component | sbb-autocomplete-grid-row | No | |
| 4 | Component | sbb-autocomplete-grid-option | No | |
| 4a | Text | Value | No | |
| 4b | Component | sbb-icon | Yes | |
| 5 | Component | sbb-autocomplete-grid-cell | Yes | |
| 6 | Component | sbb-autocomplete-grid-button | Yes |
The sbb-autocomplete-grid-cell component wraps one sbb-autocomplete-grid-button
inside a sbb-autocomplete-grid.
To properly work, it must be used within a sbb-autocomplete-grid-row.
<sbb-form-field label="Label">
<input />
<sbb-autocomplete-grid>
<sbb-autocomplete-grid-row>
<sbb-autocomplete-grid-option value="1">Option 1</sbb-autocomplete-grid-option>
<sbb-autocomplete-grid-cell>
<sbb-autocomplete-grid-button icon-name="pen-small"></sbb-autocomplete-grid-button>
</sbb-autocomplete-grid-cell>
</sbb-autocomplete-grid-row>
<sbb-autocomplete-grid-row>
<sbb-autocomplete-grid-option value="2">Option 2</sbb-autocomplete-grid-option>
<sbb-autocomplete-grid-cell>
<sbb-autocomplete-grid-button icon-name="trash-small"></sbb-autocomplete-grid-button>
</sbb-autocomplete-grid-cell>
</sbb-autocomplete-grid-row>
</sbb-autocomplete-grid>
</sbb-form-field>
Slots
The component has an unnamed slot which is used to project the sbb-autocomplete-grid-buttons.
Accessibility
The sbb-autocomplete-grid follows the combobox grid pattern;
this means that the sbb-autocomplete-grid-cell has a gridcell role and its child would receive an id
based on the sbb-autocomplete-grid-cell's id,
which is needed to correctly set the aria-activedescendant on the related input.
Slots
| Name | Description |
|---|---|
Use the unnamed slot to add a sbb-autocomplete-grid-button element. |