What does the component do?
The chip component is a compact UI element that is used to display selected values within a form field. Each chip represents a selection and can be removed again if required.
When should the component be used?
- When users can select multiple values from a list.
- If the selected values are to be displayed visually in the input field.
- When an easy way to remove individual entries is required.
Rules
- Each chip should contain a clearly legible label text, as short and concise as possible.
- When labelling, make sure that they are easily distinguishable from each other.
| Number | Type | Description | Optional | Info |
|---|---|---|---|---|
| 1 | Text | Label | No | |
| 2 | Button | Close-Action | No |
The sbb-chip is a component meant to be used in combination with the sbb-chip-group to display a list of string user inputs.
<sbb-chip-group>
<sbb-chip value="Value 1"></sbb-chip>
...
</sbb-chip-group>
Slots
It is possible to provide a label via the unnamed slot. If not present, the value will be used.
States
The disabled/readOnly properties are controlled by the sbb-chip-group.
Accessibility
Use the accessibility-label property to add info on the chip content.
Properties
| Name | Attribute | Privacy | Type | Default | Description |
|---|---|---|---|---|---|
disabled | disabled | public | boolean | false | Whether the component is disabled. |
negative | negative | public | boolean | false | Negative coloring variant flag. |
readOnly | readonly | public | boolean | false | Whether the component is readonly. |
value | value | public | (T = string) | null | null | The value of chip. Will be used as label if nothing is slotted. |
Slots
| Name | Description |
|---|---|
| Use the unnamed slot to add the display value. If not provided, the 'value' will be used. |