# Tags

* Component: and related tag components
* Path: /components/shared/tag-selector.tsx
* Import:

```typescript
import { TagSelector } from "@/components/shared/tag-selector";
```

<figure><img src="/files/yoeET4swXYGKwtRGchXu" alt=""><figcaption><p>Tag Selector</p></figcaption></figure>

A tag system that lets you categorize and filter products. Tags are colored badges that you can click to select/deselect.

### Main Components:

1. **TagSelector:**

* Props:
  * selectedTags: string\[] - Currently selected tag slugs
  * onChange: (tags: string\[]) => void - Called when tags are selected/deselected
* Features:

  * Shows tags as clickable colored badges
  * Switches to dropdown if you have more than 10 tags
  * Shows loading spinner while fetching tags

2. **ProductTags:**
   \
   `import { ProductTags } from "@/components/shared/product-tags";`

Props:

* `tags`: ExtendedProductTag\[] - Tags to display
* `limit?: number` - How many tags to show (default: 3)
* `showAll?: boolean` - Show all tags instead of limiting
* Features:

  * Shows tags on product cards
  * Shows "+X more" if there are hidden tags
  * Clicking tag navigates to tag page

3. **Admin Management:**
   \
   `Path: /dashboard/admin/tags` <br>

* Features:
  * Create tags with custom colors
  * Edit existing tags
  * Assign tags to products
  * Delete tags

Example usage in main-layout.tsx:

```typescript
// For filtering products
const [selectedTags, setSelectedTags] = useState<string[]>([]);
<TagSelector selectedTags={selectedTags} onChange={setSelectedTags} />

// For displaying on a product
<ProductTags tags={product.tags} limit={3} />
```

{% hint style="info" %}
By default, tag search bar will only display when there's more than 10 tags.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.directoryfa.st/directory-components/tags.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.