T templcn/ui
Componentnative-select

Native Select

A styled native HTML select element.

Preview

A styled native HTML select element.

Installation

Add this component to your project using the CLI.

templcn add native-select

Usage

1. Import the component in your Go or templ file:

import "your-module/ui"

2. Use the component in your template:

@ui.NativeSelect(ui.NativeSelectProps{Name: "framework"}) {
  @ui.NativeSelectOption(ui.DOMProps{}, "templ", "templ", false)
  @ui.NativeSelectOption(ui.DOMProps{}, "next", "Next.js", false)
  @ui.NativeSelectOption(ui.DOMProps{}, "svelte", "SvelteKit", false)
}

Composition

Use these parts together to build the component.

NativeSelect
├── NativeSelectOption

Examples

Named examples and common variations.

Default

A basic native select.

API Reference
PropTypeDefaultDescription
Namestring""HTML name for form submission.
Sizestring"""sm" or "" (default h-9).
DisabledboolfalseDisables the select.
RequiredboolfalseMarks as required.
View source
package ui

import (
	"context"
	"io"

	"github.com/a-h/templ"
)

type NativeSelectProps struct {
	DOMProps
	Name     string
	Value    string
	Size     string
	Disabled bool
	Required bool
	Invalid  bool
}

func NativeSelect(props NativeSelectProps) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		sizeClass := "h-9"
		size := "default"
		if props.Size == "sm" {
			sizeClass = "h-8"
			size = "sm"
		}
		attrs := attrsFromDOMProps(props.DOMProps, "native-select", cn("flex w-full appearance-none rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50", sizeClass))
		attrs["data-size"] = size
		if props.Name != "" {
			attrs["name"] = props.Name
		}
		if props.Value != "" {
			attrs["value"] = props.Value
		}
		if props.Disabled {
			attrs["disabled"] = true
		}
		if props.Required {
			attrs["required"] = true
		}
		if props.Invalid {
			attrs["aria-invalid"] = "true"
		}
		return renderElement(ctx, w, "select", attrs, templ.GetChildren(ctx))
	})
}

func NativeSelectOption(props DOMProps, value, text string, selected bool) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		attrs := attrsFromDOMProps(props, "native-select-option", "")
		attrs["value"] = value
		if selected {
			attrs["selected"] = true
		}
		return renderTextElement(ctx, w, "option", attrs, text)
	})
}

func NativeSelectOptGroup(props DOMProps, label string) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		attrs := attrsFromDOMProps(props, "native-select-optgroup", "")
		if label != "" {
			attrs["label"] = label
		}
		return renderElement(ctx, w, "optgroup", attrs, templ.GetChildren(ctx))
	})
}
Next: Navigation Menu