Select

Select

Dropdown selection control for choosing one or more options from a list.

123456789101112131415161718
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ SelectDefault() {
	@popui.Select(props.Select{
		Name: "country",
	}) {
		<option value="">Choose a country</option>
		<option value="es">Spain</option>
		<option value="fr">France</option>
		<option value="de">Germany</option>
		<option value="it">Italy</option>
	}
}

With Label

Use the Label prop for a simple text label above the select.

Country

12345678910111213141516171819
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ SelectWithLabel() {
	@popui.Select(props.Select{
		ID:    "country",
		Name:  "country",
		Label: "Country",
	}) {
		<option value="">Choose a country</option>
		<option value="es">Spain</option>
		<option value="fr">France</option>
		<option value="de">Germany</option>
	}
}

Custom Label

For advanced label features like hints, render a Label component separately with proper spacing using a flex container.

Country

1234567891011121314151617181920212223
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ SelectCustomLabel() {
	<div class="flex flex-col space-y-2">
		@popui.Label(props.Label{ID: "country", Hint: "Choose your preferred country"}) {
			Country
		}
		@popui.Select(props.Select{
			ID:   "country",
			Name: "country",
		}) {
			<option value="">Select a country</option>
			<option value="es">Spain</option>
			<option value="fr">France</option>
			<option value="de">Germany</option>
		}
	</div>
}

Disabled

Select can be disabled to prevent user interaction.

1234567891011121314151617
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ SelectDisabled() {
	@popui.Select(props.Select{
		Name:     "country",
		Disabled: true,
	}) {
		<option value="es" selected>Spain</option>
		<option value="fr">France</option>
		<option value="de">Germany</option>
	}
}

With Error

Select can display error messages for validation feedback.

Country

Please select a country

1234567891011121314151617181920212223
package showcase

import (
	"errors"
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ SelectWithError() {
	@popui.Select(props.Select{
		ID:    "country",
		Name:  "country",
		Label: "Country",
		Error: props.Error{
			Error: errors.New("Please select a country"),
		},
	}) {
		<option value="">Choose a country</option>
		<option value="es">Spain</option>
		<option value="fr">France</option>
		<option value="de">Germany</option>
	}
}

API Reference

Dropdown selection control with support for labels, validation, and multiple selection.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the select element
`Class`	`string`	-	Additional CSS classes to merge with select styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Name`	`string`	-	Name attribute for form submission
`Label`	`string`	-	Simple label text displayed above the select
`Disabled`	`bool`	`false`	Disables the select
`Autofocus`	`bool`	`false`	Automatically focuses the select on page load
`Multiple`	`bool`	`false`	Enables multiple option selection
`Required`	`bool`	`false`	Marks the select as required for form validation
`Error`	`props.Error`	-	Error configuration to display validation feedback below the select

Error

Error configuration for displaying validation feedback.

Name	Type	Default	Description
`Error`	`error`	-	Go error object to display (calls .Error() method)
`Text`	`string`	-	Text string to display as error message
`Class`	`string`	-	Additional CSS classes to merge with error styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes for the error element