A Swatch represents a color, pattern, texture, or other graphical element.
Overview
Swatches can be used independently as non-interactive graphical representations, or within Swatch Groups to facilitate selection, filtering, and toggling workflows.
Sample
Usage
- Represent colors or patterns in a legend
- Indicate a selected color
Best practices
Use standalone swatches to represent colors or patterns in a legend or other non-interactive context. Multiple Swatch components can be used together within Swatch Groups to facilitate user choice or action.
Setting colors
The color property accepts any valid CSS color format, including hex, rgb, and hsl. You can also use rgba and hsla to set colors with opacity. To use the swatch to indicate an absence of color, omit the color property.
Using patterns
To display a pattern or other graphical fill, add a child element within the image slot. This can be an <img element or a <div with a background image set via CSS. To display both a color and a pattern, set the color property and add a child element with the image slot. The slotted element will be positioned over the swatch's color fill - this can be useful for displaying how a pattern or image with transparency may appear over a solid color.
API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| color | color | Specifies the component's color | string | |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | false |
| label | label | Specifies an accessible label for the component. | string | |
| scale | scale | Specifies the component's size. When contained in a parent calcite-swatch-group, the component inherits the parent's scale value. | Scale | "m" |
| selected | selected | When true, the component is selected. | boolean | false |
| value | value | The component's value. | any |
Slots
| Name | Description |
|---|---|
| image | A slot for adding an image or pattern. |
Styles
| Name | Description |
|---|---|
| --calcite-swatch-corner-radius | Specifies the component's corner radius. |
Events
| Name | Description | Behavior |
|---|---|---|
| calciteSwatchSelect | 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<this> |
| setFocus | Sets focus on the component. | setFocus(options?: FocusOptions): Promise<void> |