Select Box

Dropdown control for choosing from predefined options.

TailwindCSS

Vanilla JS

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 selectbox
```
Add the JavaScript to your layout
```
@selectbox.Script()
@popover.Script()
```
Call this template in your base layout file (e.g., in the <head> section).

Examples

With Label

Fruit

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

Multiple

package showcase

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

templ SelectBoxMultipleSelect() {
	<div class="w-full max-w-sm">
		@selectbox.SelectBox() {
			@selectbox.Trigger(selectbox.TriggerProps{Multiple: true}) {
				@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>
}

Multiple Pills

package showcase

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

templ SelectBoxMultipleSelectPills() {
	<div class="w-full max-w-sm">
		@selectbox.SelectBox() {
			@selectbox.Trigger(selectbox.TriggerProps{ShowPills: true,}) {
				@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>
}

No Search

package showcase

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

templ SelectBoxNoSearch() {
	<div class="w-full max-w-sm">
		@selectbox.SelectBox() {
			@selectbox.Trigger() {
				@selectbox.Value(selectbox.ValueProps{
					Placeholder: "Select a fruit",
				})
			}
			@selectbox.Content(selectbox.ContentProps{NoSearch:true}) {
				@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>
}

Disabled

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

Fruit

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

API Reference

Required parameter

Hover for description

SelectBox

Root container for the select box component.

Name	Type	Default
`ID` Unique identifier for the select container. Auto-generated if not provided.	`string`	-
`Class` Additional CSS classes to apply to the select container.	`string`	-
`Attributes` Additional HTML attributes to apply to the select container.	`templ.Attributes`	-
`Multiple` Whether multiple options can be selected.	`bool`	`false`

Trigger

Button that opens the select dropdown when clicked.

Name	Type	Default
`ID` Unique identifier for the trigger element.	`string`	-
`Class` Additional CSS classes to apply to the trigger.	`string`	-
`Attributes` Additional HTML attributes to apply to the trigger element.	`templ.Attributes`	-
`Name` Name attribute for the hidden input field used in forms.	`string`	-
`Required` Whether the select field is required for form validation.	`bool`	`false`
`Disabled` Whether the select is disabled and non-interactive.	`bool`	`false`
`HasError` Whether to display error styling on the select trigger.	`bool`	`false`
`Multiple` Whether multiple selections are allowed.	`bool`	`false`
`ShowPills` Whether to show selected items as pills (automatically enables Multiple).	`bool`	`false`
`SelectedCountText` Text template for showing selected count in multiple mode.	`string`	-

Value

Display area for the selected value(s) or placeholder text.

Name	Type	Default
`ID` Unique identifier for the value element.	`string`	-
`Class` Additional CSS classes to apply to the value display.	`string`	-
`Attributes` Additional HTML attributes to apply to the value element.	`templ.Attributes`	-
`Placeholder` Placeholder text shown when no option is selected.	`string`	-
`Multiple` Whether this value display supports multiple selections.	`bool`	`false`

Content

Dropdown container that holds the selectable options.

Name	Type	Default
`ID` Unique identifier for the content element.	`string`	-
`Class` Additional CSS classes to apply to the dropdown content.	`string`	-
`Attributes` Additional HTML attributes to apply to the content element.	`templ.Attributes`	-
`NoSearch` Whether to hide the search input in the dropdown.	`bool`	`false`
`SearchPlaceholder` Placeholder text for the search input field.	`string`	-

Group

Container for grouping related select options together.

Name	Type	Default
`ID` Unique identifier for the group element.	`string`	-
`Class` Additional CSS classes to apply to the group.	`string`	-
`Attributes` Additional HTML attributes to apply to the group element.	`templ.Attributes`	-

Label

Label text for a group of select options.

Name	Type	Default
`ID` Unique identifier for the label element.	`string`	-
`Class` Additional CSS classes to apply to the label.	`string`	-
`Attributes` Additional HTML attributes to apply to the label element.	`templ.Attributes`	-

Item

Individual selectable option within the dropdown.

Name	Type	Default
`ID` Unique identifier for the item element.	`string`	-
`Class` Additional CSS classes to apply to the item.	`string`	-
`Attributes` Additional HTML attributes to apply to the item element.	`templ.Attributes`	-
`Value` The value of this option that will be submitted with forms.	`string`	-
`Selected` Whether this option is currently selected.	`bool`	`false`
`Disabled` Whether this option is disabled and cannot be selected.	`bool`	`false`

Getting Started

Components