Tags Input

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>
}

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>
}

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>
}

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>
}