127.0.0.1/32
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 tagsinput
Load 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
Linux
Windows
macOS
Ubuntu
Debian
Fedora
Arch Linux
CentOS
FreeBSD
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
127.0.0.1/32
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
127.0.0.1/32
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/field"
"github.com/templui/templui/components/tagsinput"
)
templ TagsInputForm() {
<div class="w-full max-w-sm">
@field.Field() {
@field.Label(field.LabelProps{
For: "tags-form",
}) {
Net
}
@tagsinput.TagsInput(tagsinput.Props{
ID: "tags-form",
Placeholder: "Enter a network",
HasError: true,
})
@field.Description() {
Enter a network in format like '1.1.1.1/32'
}
@field.Error() {
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 |
|---|---|---|
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. | | |