Select Box

Dropdown control for choosing from predefined options.

Source Tailwind CSS JavaScript

Installation

templui add selectbox

Load the script once in your layout:

<head> @selectbox.Script() </head>

Examples

With Label

Fruit

Multiple

Multiple Pills

No Search

Disabled

Form

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

Menu

Getting Started

Components