Chips

First, import the Chips component from the library. Below is a simple example demonstrating how to use the Chips component. This example shows how to create a chip with a basic text label:

<script>
  import { Chips } from "theui-svelte";
</script>

<Chips>Example Chips</Chips>

In this example the text placed inside the Chips component creates a chip displaying the text "Example Chips".

You can put an image next to the text. Below is a basic example demonstrating how to use the Chips component with an image:

Jasmine Kira

Svelte

<Chips imgSrc="/path/to/image.png" altText="Photo of Jasmine Kira">...</Chips>

The imgSrc prop specifies the path to the image ("/path/to/image.png"), adding an image to the chip. Use the altText prop to set the image's alternative text for screen readers. It is an empty string by default, which marks the image as decorative, so set it when the image carries meaning.

The Chips component can display a close button, allowing users to dismiss the chip. This is controlled by the close prop, which is set to false by default. To display the close button, set the close prop to true.

Example Chips Hide chips

Svelte

<Chips close={true}>...</Chips>

Clicking the close button hides the chip.

The Chips component allows you to adjust its size using the size prop. This prop controls the dimensions of the chip's image. The available size options are:
- sm (small)
- md (medium) - default
- lg (large)

Pick the size that matches the text around the chip.

Jasmine Kira Jasmine Kira Jasmine Kira

Svelte

<Chips size="sm">...</Chips>
<Chips size="md">...</Chips>
<Chips size="lg">...</Chips>

The size prop only takes effect when an image is added using the imgSrc prop.

The rounded prop in the Chips component controls its border radius. Values: none, sm, md, lg, xl, 2xl, full. Default is full.

Jasmine Kira Jasmine Kira Jasmine Kira Jasmine Kira Jasmine Kira

Svelte

<Chips rounded="none">...</Chips>
<Chips rounded="md">...</Chips>
<Chips rounded="lg">...</Chips>
<Chips rounded="xl">...</Chips>
<Chips rounded="full">...</Chips>

The Chips component offers extensive customization options using Tailwind CSS classes. You can easily style both the chip and the accompanying image by applying custom classes through the class and imgClasses props.

<Chips class="border border-red-500 bg-yellow-200">Custom Chip</Chips>

Image Customization

Similarly, you can style the image within the chip using the imgClasses prop. This lets you apply specific styles like borders, padding, and background to the image.

Jasmine Kira

Svelte

<Chips imgClasses="border border-brand-500">...</Chips>

The Chips component supports accessibility best practices. When an image is used, it includes proper alt text for screen readers. If the close prop is enabled, the close button includes an aria-label to describe its action, allowing users to remove chips with assistive technologies. When the href prop is set, the chip renders as a link; otherwise it gets role="button". The component maintains proper semantics and structure for clear navigation and interaction.