Select

Select renders a native dropdown from Options slice.

github.com/fastygo/templ/ui

Summary

Select renders a native dropdown from Options slice.Select marks selected option when Value matches Option Value.

Use Cases

Pick one country in an address form

Pick one category in a filter form

Semantics

InputClasses recipe from utils styles the surface

Options render as option elements inside select

Example variant.default

import "github.com/fastygo/templ/ui"
import "github.com/fastygo/templ/ui/select"

templ Example() {
	@ui.Select(ui.SelectProps{
		Name:  "country",
		Value: "us",
		Options: []selectfield.Option{
			{Value: "us", Label: "United States"},
			{Value: "ca", Label: "Canada"},
		},
	})
}

import "github.com/fastygo/templ/ui"
import "github.com/fastygo/templ/ui/select"

templ Example() {
	@ui.Select(ui.SelectProps{
		Name:  "country",
		Value: "us",
		Options: []selectfield.Option{
			{Value: "us", Label: "United States"},
			{Value: "ca", Label: "Canada"},
		},
	})
}

Example state.disabled

import "github.com/fastygo/templ/ui"
import "github.com/fastygo/templ/ui/select"

templ Example() {
	@ui.Select(ui.SelectProps{
		Disabled: true,
		Name:     "locked",
		Options: []selectfield.Option{
			{Value: "a", Label: "Option A"},
		},
	})
}

import "github.com/fastygo/templ/ui"
import "github.com/fastygo/templ/ui/select"

templ Example() {
	@ui.Select(ui.SelectProps{
		Disabled: true,
		Name:     "locked",
		Options: []selectfield.Option{
			{Value: "a", Label: "Option A"},
		},
	})
}

API

Disabled · bool — role: state

Name · string — role: form-name

OptGroup · OptGroupProps — role: grouped-choices

Option · OptionProps — role: slot-choice

Options · []Option — role: choices

Required · bool — role: state

Size · string — role: density; enum: default|sm|lg|xs; default: default; source: utils.recipes.InputSize

Value · string — role: selected-value

Variant · string — role: appearance; enum: default|outline|ghost|unstyled; default: default; source: utils.recipes.InputChrome