Tags Input

Tags input field that allows users to enter and edit tags.

TailwindCSS

Vanilla JS

127.0.0.1/32

package showcase

import "github.com/axzilla/templui/internal/components/tagsinput"

templ TagsInputDefault() {
	<div class="w-full max-w-sm">
		@tagsinput.TagsInput(tagsinput.Props{
			Placeholder: "Enter a network",
			Value:       []string{"127.0.0.1/32"},
		},
		)
	</div>
}

Installation

Install the component
```
templui add tagsinput
```
Add the JavaScript to your layout
```
@tagsinput.Script()
```
Call this template in your base layout file (e.g., in the <head> section).

Examples

Disabled

127.0.0.1/32

package showcase

import "github.com/axzilla/templui/internal/components/tagsinput"

templ TagsInputDisabled() {
	<div class="w-full max-w-sm">
		@tagsinput.TagsInput(tagsinput.Props{
			Placeholder: "Enter a network",
			Value: []string{"127.0.0.1/32"},
			Disabled:    true,
		},
		)
	</div>
}

With Label

Nets

127.0.0.1/32

package showcase

import (
	"github.com/axzilla/templui/internal/components/tagsinput"
	"github.com/axzilla/templui/internal/components/label"
)

templ TagsInputWithLabel() {
	<div class="w-full max-w-sm grid gap-2">
		@label.Label(label.Props{
			For: "nets",
		}) {
			Nets
		}
		@tagsinput.TagsInput(tagsinput.Props{
			ID:          "nets",
			Placeholder: "Enter a network",
			Value: []string{"127.0.0.1/32"},
		})
	</div>
}

Form

Net

Enter a network in format like '1.1.1.1/32'

Please enter a valid network in format like '1.1.1.1/32'

package showcase

import (
"github.com/axzilla/templui/internal/components/form"
"github.com/axzilla/templui/internal/components/tagsinput"
)

templ TagsInputForm() {
<div class="w-full max-w-sm">
    @form.Item() {
        @form.Label(form.LabelProps{
            For: "tags-form",
        }) {
            Net
        }
        @tagsinput.TagsInput(tagsinput.Props{
            ID:          "tags-form",
            Placeholder: "Enter a network",
            HasError:    true,
        })
        @form.Description() {
            Enter a network in format like '1.1.1.1/32'
        }
        @form.Message(form.MessageProps{
            Variant: form.MessageVariantError,
        }) {
            Please enter a valid network in format like '1.1.1.1/32'
        }
    }
</div>
}

API Reference

Required parameter

Hover for description

TagsInput

Interactive input component for managing a collection of tags.

Name	Type	Default
`ID` Unique identifier for the tags input container.	`string`	-
`Name` Name attribute for the hidden input fields used in form submission.	`string`	-
`Value` Array of current tag values.	`[]string`	`[]`
`Placeholder` Placeholder text for the input field.	`string`	-
`Class` Additional CSS classes to apply to the tags input container.	`string`	-
`HasError` Whether to display error styling on the input.	`bool`	`false`
`Attributes` Additional HTML attributes to apply to the container element.	`templ.Attributes`	-
`Disabled` Whether the input is disabled and non-interactive.	`bool`	`false`
`Readonly` Whether the input is read-only (tags can be removed but not added).	`bool`	`false`

Getting Started

Components

Tags Input

Installation

Examples

API Reference

TagsInput