package showcase
import "github.com/templui/templui/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
templui add tagsinputLoad the script once in your layout:
<head>
@tagsinput.Script()
</head>import "github.com/templui/templui/components/tagsinput"Load the script once in your layout:
<head>
@tagsinput.Script()
</head>Examples
Suggestions
package showcase
import "github.com/templui/templui/components/tagsinput"
templ TagsInputSuggestions() {
<div class="w-full max-w-sm">
@tagsinput.TagsInput(tagsinput.Props{
ID: "tags-with-suggestions",
Placeholder: "Add a tag...",
Suggestions: []string{"Linux", "Windows", "macOS", "Ubuntu", "Debian", "Fedora", "Arch Linux", "CentOS", "FreeBSD"},
})
</div>
}
Disabled
package showcase
import "github.com/templui/templui/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
package showcase
import (
"github.com/templui/templui/components/label"
"github.com/templui/templui/components/tagsinput"
)
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
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/templui/templui/components/form"
"github.com/templui/templui/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
TagsInput
Interactive input component for managing a collection of tags.
| Name | Type | Default |
|---|---|---|
Unique identifier for the tags input container. | | - |
Name attribute for the hidden input fields used in form submission. | | - |
Array of current tag values. | | |
Placeholder text for the input field. | | - |
Additional CSS classes to apply to the tags input container. | | - |
Whether to display error styling on the input. | | |
Additional HTML attributes to apply to the container element. | | - |
Whether the input is disabled and non-interactive. | | |
Whether the input is read-only (tags can be removed but not added). | | |
List of suggestions shown as autocomplete options while typing. | | |