Select Box
Dropdown control for choosing from predefined options.
TailwindCSS
Vanilla JS
Fruits
Apple
Banana
Blueberry
Grapes
Pineapple
package showcase
import "github.com/axzilla/templui/internal/components/selectbox"
templ SelectBoxDefault() {
<div class="w-full max-w-sm">
@selectbox.SelectBox() {
@selectbox.Trigger() {
@selectbox.Value(selectbox.ValueProps{
Placeholder: "Select a fruit",
})
}
@selectbox.Content() {
@selectbox.Group() {
@selectbox.Label() {
Fruits
}
@selectbox.Item(selectbox.ItemProps{
Value: "apple",
}) {
Apple
}
@selectbox.Item(selectbox.ItemProps{
Value: "banana",
}) {
Banana
}
@selectbox.Item(selectbox.ItemProps{
Value: "blueberry",
}) {
Blueberry
}
@selectbox.Item(selectbox.ItemProps{
Value: "grapes",
}) {
Grapes
}
@selectbox.Item(selectbox.ItemProps{
Value: "pineapple",
}) {
Pineapple
}
}
}
}
</div>
}
Installation
Install the component
templui add selectboxAdd the JavaScript to your layout
@selectbox.Script()Call this template in your base layout file (e.g., in the <head> section).
Examples
With Label
Fruits
Apple
Banana
Orange
package showcase
import (
"github.com/axzilla/templui/internal/components/label"
"github.com/axzilla/templui/internal/components/selectbox"
)
templ SelectBoxWithLabel() {
<div class="space-y-2 w-full max-w-sm">
@label.Label(label.Props{
For: "select-with-label",
}) {
Fruit
}
@selectbox.SelectBox() {
@selectbox.Trigger(selectbox.TriggerProps{
ID: "select-with-label",
}) {
@selectbox.Value(selectbox.ValueProps{
Placeholder: "Select a fruit",
})
}
@selectbox.Content() {
@selectbox.Label() {
Fruits
}
@selectbox.Item(selectbox.ItemProps{
Value: "apple",
}) {
Apple
}
@selectbox.Item(selectbox.ItemProps{
Value: "banana",
}) {
Banana
}
@selectbox.Item(selectbox.ItemProps{
Value: "orange",
}) {
Orange
}
}
}
</div>
}
Disabled
Fruits
Apple
Banana
package showcase
import "github.com/axzilla/templui/internal/components/selectbox"
templ SelectBoxDisabled() {
<div class="space-y-2 w-full max-w-sm">
@selectbox.SelectBox() {
@selectbox.Trigger(selectbox.TriggerProps{
Disabled: true,
}) {
@selectbox.Value(selectbox.ValueProps{
Placeholder: "Select a fruit",
})
}
@selectbox.Content() {
@selectbox.Label() {
Fruits
}
@selectbox.Item(selectbox.ItemProps{
Value: "apple",
}) {
Apple
}
@selectbox.Item(selectbox.ItemProps{
Value: "banana",
}) {
Banana
}
}
}
</div>
}
Form
Apple
Banana
Blueberry
Grapes
Pineapple (out of stock)
Select a fruit category.
A fruit selection is required.
package showcase
import (
"github.com/axzilla/templui/internal/components/form"
"github.com/axzilla/templui/internal/components/selectbox"
)
templ SelectBoxForm() {
<div class="w-full max-w-sm">
@form.Item() {
@form.Label(form.LabelProps{
For: "select-form",
}) {
Fruit
}
@selectbox.SelectBox() {
@selectbox.Trigger(selectbox.TriggerProps{
ID: "select-form",
Name: "fruit",
Required: true,
HasError: true,
}) {
@selectbox.Value(selectbox.ValueProps{
Placeholder: "Select a fruit",
})
}
@selectbox.Content() {
@selectbox.Item(selectbox.ItemProps{
Value: "apple",
}) {
Apple
}
@selectbox.Item(selectbox.ItemProps{
Value: "banana",
}) {
Banana
}
@selectbox.Item(selectbox.ItemProps{
Value: "blueberry",
Selected: true,
}) {
Blueberry
}
@selectbox.Item(selectbox.ItemProps{
Value: "grapes",
}) {
Grapes
}
@selectbox.Item(selectbox.ItemProps{
Value: "pineapple",
Disabled: true,
}) {
Pineapple (out of stock)
}
}
}
@form.Description() {
Select a fruit category.
}
@form.Message(form.MessageProps{
Variant: form.MessageVariantError,
}) {
A fruit selection is required.
}
}
</div>
}