Chips are commonly used in filtering and as categorical identifiers. Chips can be contained within a Chip Group to provide keyboard functionality, consistent spacing, and facilitate selection workflows and filtering patterns.
Overview
Chips are small, feature-rich components that can be used independently or in groups. Chips are used in Combobox and other scenarios that have a filtering interaction.
Chips can be themed to convey a variety of information, can contain Icons, Avatars, or images as visual cues. Additionally, Chips can be closed and visually hidden by a user.
Usage
- Labeling
- Status badges
- Contextual counts or context for information.
Sample
<calcite-chip value="Alluvial" label="Alluvial">
Alluvial
</calcite-chip>
Accessibility
Keyboard navigation
Key | Function |
---|---|
Tab | When closable is true , moves focus in and out of the "Close" button. |
Tab and Shift | When closable is true , moves focus in and out of the "Close" button. |
Enter | When closable is true and focus is on the "Close" button, hides the component. |
Space | When closable is true and focus is on the "Close" button, hides the component. |
API reference
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
appearance | appearance | Specifies the appearance style of the component. | "outline" | "outline-fill" | "solid" | "solid" |
closable | closable | When true , a close button is added to the component. | boolean | false |
closed | closed | When true , hides the component. | boolean | false |
closeOnDelete | close-on-delete | When true , the component closes when the Delete or Backspace key is pressed while focused. | boolean | false |
disabled | disabled | When true , interaction is prevented and the component is displayed with lower opacity. | boolean | false |
icon | icon | Specifies an icon to display. | string | |
iconFlipRtl | icon-flip-rtl | When true , the icon will be flipped when the element direction is right-to-left ("rtl" ). | boolean | false |
kind | kind | Specifies the kind of the component, which will apply to border and background if applicable. | "brand" | "inverse" | "neutral" | "neutral" |
label | label | Accessible name for the component. | string | |
messageOverrides | Use this property to override individual strings used by the component. | { dismissLabel?: string; } | ||
scale | scale | Specifies the size of the component. When contained in a parent calcite-chip-group inherits the parent's scale value. | "l" | "m" | "s" | "m" |
selected | selected | When true , the component is selected. | boolean | false |
value | value | The component's value. | any |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding text. |
image | A slot for adding an image. |
Styles
Name | Description |
---|---|
--calcite-chip-background-color | Specifies the component's background color. |
--calcite-chip-border-color | Specifies the component's border color. |
--calcite-chip-corner-radius | Specifies the component's corner radius. |
--calcite-chip-text-color | Specifies the component's text color. |
--calcite-chip-icon-color | Specifies the component's icon color. |
--calcite-chip-close-icon-color | Specifies the component's close element icon color. |
--calcite-chip-select-icon-color | Specifies the component's selection element icon color. |
--calcite-chip-select-icon-color-pressed | Specifies the component's selection element icon color when active. |
Events
Name | Description | Behavior |
---|---|---|
calciteChipClose | Fires when the component's close button is selected. | |
calciteChipSelect | Fires when the selected state of the component changes. |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
setFocus | Sets focus on the component. | setFocus(): Promise<void> |