Custom Pillbox Input

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

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.

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

2. Background modes

Glassmorphic frost (default)

Solid

{% 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.

{% 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.

{% 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.

{% 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.

{% 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.

{% 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.