---
title: pillbox-instructions
---

# Custom Pillbox Input

 Every supported setting, with a live instance you can type into. Each example shows the HubL that produced it.

[Home](https://hubspot.stephanis.me/?hsLang=sr-me) · [Standalone demo](https://hubspot.stephanis.me/pillbox-demo?hsLang=sr-me) · [Source on GitHub](https://github.com/georgestephanis/hs-marketplace/tree/trunk/src/custom-pillbox-input.module)

## Field reference

| Field | Type | Default | What it does |
| --- | --- | --- | --- |
| `field_name` | text (required) | `custom_pillbox_tags` | The `name` on the underlying `<select multiple>`, used when a form submits. |
| `placeholder_text` | text | `Add tags...` | Placeholder shown in the empty text input. |
| `max_pills` | number (1–100) | `10` | Maximum tags a visitor may add. |
| `limit_reached_text` | text | `Limit reached` | Message shown once `max_pills` is hit. |
| `remove_button_label` | text | `Remove` | Accessible label on each pill's remove control. |
| `no_matches_text` | text | `No suggestions found` | Shown when typing matches no suggestion. |
| `predefined_suggestions` | repeated text | Marketing, Sales, Development, Design | Auto-suggest options offered as the visitor types. |
| `custom_colors_csv` | text | *empty* | Comma-separated hex colours overriding the default pill palette. |
| `styles.bg_style` | choice | `glassmorphism` | `glassmorphism` for a frosted container, `solid` for a flat one. |
| `styles.primary_color` | color | `#3b82f6` | Accent colour. Inherits `theme.primary_color` when available. |
| `styles.text_color` | color | `#ffffff` | Text colour. Inherits `theme.secondary_color` when available. |

## 1. Defaults

With no parameters beyond `path`, every field falls back to its default.

- Marketing
- Sales
- Development
- Design

```
{% module "pb_default" path="/src/custom-pillbox-input.module" %}
```

## 2. Background modes

### Glassmorphic frost (default)

- Marketing
- Sales
- Development
- Design

### Solid

- Marketing
- Sales
- Development
- Design

```
{% module "pb_solid" path="/src/custom-pillbox-input.module" %}
  {% module_attribute "styles" %}{ "bg_style": "solid" }{% end_module_attribute %}
{% end_module %}
```

## 3. Limiting how many tags

 Set `max_pills`, and pair it with `limit_reached_text` so the message matches the limit. This instance stops at three.

- Marketing
- Sales
- Development
- Design

```
{% module "pb_limit" path="/src/custom-pillbox-input.module",
  field_name="pb_limit",
  max_pills=3,
  limit_reached_text="That's three — remove one to add another",
  placeholder_text="Pick up to 3..." %}
```

## 4. Your own suggestions

`predefined_suggestions` is a repeated text field, so pass a list. Visitors can still type values that are not on it.

- WordPress
- WP-CLI
- Gutenberg
- PHP
- JavaScript
- HubL

```
{% module "pb_suggest" path="/src/custom-pillbox-input.module",
  field_name="pb_suggest",
  placeholder_text="Try typing 'w'...",
  predefined_suggestions=["WordPress", "WP-CLI", "Gutenberg", "PHP", "JavaScript", "HubL"] %}
```

## 5. Empty-state message

 Type something that matches nothing to see `no_matches_text`.

- Alpha
- Beta
- Gamma

```
{% module "pb_nomatch" path="/src/custom-pillbox-input.module",
  field_name="pb_nomatch",
  no_matches_text="Nothing matches — press Enter to add it anyway",
  predefined_suggestions=["Alpha", "Beta", "Gamma"] %}
```

## 6. Custom pill palette

`custom_colors_csv` takes a comma-separated list of hex colours. Pills cycle through them in order, replacing the built-in palette. Blank entries are ignored.

- Amber
- Teal
- Violet
- Red
- Slate

```
{% module "pb_colors" path="/src/custom-pillbox-input.module",
  field_name="pb_colors",
  custom_colors_csv="#f97316, #14b8a6, #a855f7, #ef4444" %}
```

## 7. Accent and text colours

`styles.primary_color` and `styles.text_color` are colour fields, so they take a `color` and an `opacity`. Left alone, they inherit `theme.primary_color` and `theme.secondary_color`.

- Marketing
- Sales
- Development
- Design

```
{% module "pb_accent" path="/src/custom-pillbox-input.module" %}
  {% module_attribute "styles" %}{
    "bg_style": "solid",
    "primary_color": { "color": "#f59e0b", "opacity": 100 },
    "text_color": { "color": "#0f172a", "opacity": 100 }
  }{% end_module_attribute %}
{% end_module %}
```

## 8. Using it in a form

 The module renders a native `<select multiple>` carrying `field_name`, and fires `change` events as selections update. Place it inside a form and the selected tags submit like any other field.

```
<form method="post" action="/your-handler">
  {% module "pb_form" path="/src/custom-pillbox-input.module",
    field_name="signup_interests" %}
  <button type="submit">Submit</button>
</form>
```

 Give each instance on a page its own `field_name`, or their submitted values will collide.

[Home](https://hubspot.stephanis.me/?hsLang=sr-me) [Terms of Service](https://hubspot.stephanis.me/terms-of-service?hsLang=sr-me) [Privacy Policy](https://hubspot.stephanis.me/privacy-policy?hsLang=sr-me)