Tickster Styleguide

Appearance

Tags ​

When to use it ​

The Tags component allows users to add and remove multiple tag values through a single input field. Use it when you need to let users input multiple "tags" in a form control. (See FormControl for size variants.)

The component is initialized using the data-tags attribute on a standard text input:

  • Add data-tags to any text input element
  • Use the input's value attribute to specify initial tags (comma-separated)
  • Use the input's placeholder attribute for the placeholder text
  • The component automatically initializes on page load
  • Users can add tags by typing and pressing Enter, Tab, Space, or comma
  • Tags can be removed by clicking the "✕" button on each tag

Important

When the Tags component is initialized, it creates a hidden input field with the original ID and name. This hidden field stores the comma-separated tag values and is what gets submitted with the form, while the visible input is used only for adding new tags.

What it looks like ​

Code examples ​

html
<div class="c-form-control">
    <label for="tags-example" class="c-label">Tags</label>
    <input type="text" data-tags id="tags-example" name="tags" placeholder="Add a tag...">
</div>
html
<div class="c-form-control c-form-control--small">
    <label for="small-tags" class="c-label">Small Tags</label>
    <input type="text" data-tags id="small-tags" name="tags" placeholder="Add a tag...">
</div>
html
<div class="c-form-control c-form-control--large">
    <label for="large-tags" class="c-label">Large Tags</label>
    <input type="text" data-tags id="large-tags" name="tags" placeholder="Add a tag...">
</div>
html
<form id="product-form">
  <div class="c-form-control">
    <label for="product-tags" class="c-label">Tags</label>
    <input 
      type="text" 
      data-tags 
      id="product-tags" 
      name="tags" 
      placeholder="Add product tags..." 
      required>
    <div class="c-note u-hidden" id="tags-validation">Please add at least one tag</div>
  </div>

  <button type="submit" class="c-button c-button--primary">Save Product</button>
</form>

Accessibility notes ​

The Tags component provides the following accessibility features:

  1. Proper ARIA labels: All remove buttons include descriptive aria-label attributes.
  2. Keyboard Navigation: Users can add tags using keyboard (Enter, Tab, Space, or comma), and remove tags by clicking on the remove "X" in tag-pill.
  3. Focus Management: Focus is properly managed between the input field and tag elements.
  4. Visual Feedback: Visual cues indicate when tags are added, focused, or being removed.

When implementing the Tag component, ensure that:

  • The input field has an associated label
  • Error messages are properly associated with the form control
  • The component can be used with keyboard-only navigation