> ## Documentation Index
> Fetch the complete documentation index at: https://dev.writer.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tags

A component to display coloured tag pills.

<img src="https://mintcdn.com/writer/dHnl9w_Om9ycQRLE/framework/public/components/tags.png?fit=max&auto=format&n=dHnl9w_Om9ycQRLE&q=85&s=e063b7fc90bfb6b61b52e86c618888e5" width="718" height="118" data-path="framework/public/components/tags.png" />

## Fields

<table className="componentFields">
  <thead>
    <th>Name</th>
    <th>Type</th>
    <th class="desc">Description</th>
    <th>Options</th>
  </thead>

  <tbody>
    <tr>
      <td>Tags</td>
      <td>Key-Value</td>
      <td>Key-value object with tags. Must be a JSON string or a state reference to a dictionary.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Reference</td>
      <td>Color</td>
      <td>The colour to be used as reference for chroma and luminance, and as the starting point for hue rotation.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Seed value</td>
      <td>Number</td>
      <td>Choose a different value to reshuffle colours.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Rotate hue</td>
      <td>Boolean</td>
      <td>If active, rotates the hue depending on the content of the string. If turned off, the reference colour is always used.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Primary text</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Custom CSS classes</td>
      <td>Text</td>
      <td>CSS classes, separated by spaces. You can define classes in custom stylesheets.</td>

      <td>
        <span>-</span>
      </td>
    </tr>
  </tbody>
</table>

## Events

<AccordionGroup>
  <Accordion title="wf-tag-click" icon="code">
    Triggered when a tag is clicked.

    ```python theme={null}
    def handle_tag_click(state, payload):
    state["selected_tag_id"] = payload
    ```
  </Accordion>
</AccordionGroup>

<events />