Documentation
¶
Overview ¶
Package dropdown provides dropdown/select components with single and multi-select support.
Available variants:
- New() creates a basic dropdown (template: "lvt:dropdown:default:v1")
- NewSearchable() creates a searchable dropdown (template: "lvt:dropdown:searchable:v1")
- NewMulti() creates a multi-select dropdown (template: "lvt:dropdown:multi:v1")
Open/close is handled client-side via CSS classes and onclick handlers. Server actions handle data operations only (Select, Search, ToggleItem).
Example usage:
// In your controller/state
CountrySelect: dropdown.NewSearchable("country", countries,
dropdown.WithPlaceholder("Select country"),
)
// In your template
{{template "lvt:dropdown:searchable:v1" .CountrySelect}}
Index ¶
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
func Templates ¶
func Templates() *base.TemplateSet
Templates returns the dropdown component's template set for registration with the LiveTemplate framework.
Example usage in main.go:
import "github.com/livetemplate/lvt/components/dropdown"
tmpl, err := livetemplate.New("app",
livetemplate.WithComponentTemplates(dropdown.Templates()),
)
Available templates:
- "lvt:dropdown:default:v1" - Basic single-select dropdown
- "lvt:dropdown:searchable:v1" - Searchable dropdown with filter input
- "lvt:dropdown:multi:v1" - Multi-select dropdown with checkboxes
Types ¶
type Dropdown ¶
type Dropdown struct {
base.Base
// Options is the list of selectable items
Options []Item
// Selected is the currently selected item (nil if none)
Selected *Item
// Placeholder is shown when nothing is selected
Placeholder string
// Disabled prevents user interaction
Disabled bool
}
Dropdown is a basic single-select dropdown component. Use template "lvt:dropdown:default:v1" to render.
func New ¶
New creates a basic single-select dropdown.
Example:
countries := []dropdown.Item{
{Value: "us", Label: "United States"},
{Value: "ca", Label: "Canada"},
{Value: "mx", Label: "Mexico"},
}
d := dropdown.New("country", countries,
dropdown.WithPlaceholder("Select country"),
dropdown.WithSelected("us"),
)
func (*Dropdown) Styles ¶
func (d *Dropdown) Styles() styles.DropdownStyles
Styles returns the resolved DropdownStyles for this component.
type Item ¶
type Item struct {
Value string // The value sent to the server when selected
Label string // The display text shown to users
Disabled bool // Whether this option is disabled
Group string // Optional group/category for grouped dropdowns
}
Item represents a single option in the dropdown.
type Multi ¶
type Multi struct {
Dropdown
// SelectedItems contains all selected items
SelectedItems []Item
// MaxSelections limits how many items can be selected (0 = unlimited)
MaxSelections int
}
Multi is a multi-select dropdown with checkboxes. Use template "lvt:dropdown:multi:v1" to render.
func NewMulti ¶
NewMulti creates a multi-select dropdown. Use WithMultiOptions to apply multi-specific options like WithMaxSelections.
Example:
d := dropdown.NewMulti("tags", tagOptions,
dropdown.WithPlaceholder("Select tags..."),
).WithMultiOptions(
dropdown.WithMaxSelections(5),
)
func (*Multi) DisplayText ¶
DisplayText returns a summary of selected items for display.
func (*Multi) IsSelected ¶
IsSelected checks if an item is currently selected.
func (*Multi) ToggleItem ¶
ToggleItem toggles selection of an item by value.
func (*Multi) WithMultiOptions ¶
func (m *Multi) WithMultiOptions(opts ...MultiOption) *Multi
WithMultiOptions applies multi-specific options. Chainable.
type MultiOption ¶
type MultiOption func(*Multi)
MultiOption is a functional option for configuring multi-select dropdowns.
func WithMaxSelections ¶
func WithMaxSelections(max int) MultiOption
WithMaxSelections limits how many items can be selected (0 = unlimited).
func WithSelectedValues ¶
func WithSelectedValues(values []string) MultiOption
WithSelectedValues pre-selects multiple items by their values.
type Option ¶
type Option func(*Dropdown)
Option is a functional option for configuring dropdowns.
func WithOpen ¶
WithOpen is a no-op. Open/close is now handled client-side via CSS classes. Deprecated: This option has no effect.
func WithPlaceholder ¶
WithPlaceholder sets the placeholder text shown when nothing is selected.
func WithSelected ¶
WithSelected pre-selects an item by value.
func WithStyled ¶
WithStyled enables Tailwind CSS styling for the component. When false, renders semantic HTML without styling classes.
type Searchable ¶
type Searchable struct {
Dropdown
// Query is the current search query
Query string
// FilteredOptions is the list of options matching the current query
// If nil, all options are shown
FilteredOptions []Item
// MinChars is the minimum characters required before filtering starts
MinChars int
// Open is server-controlled for searchable dropdowns because visibility
// depends on whether the query meets MinChars and results exist.
// The template renders class="...{{if .Open}}open{{end}}" on the root.
Open bool
}
Searchable is a dropdown with search/filter capability. Use template "lvt:dropdown:searchable:v1" to render.
func NewSearchable ¶
func NewSearchable(id string, options []Item, opts ...Option) *Searchable
NewSearchable creates a searchable dropdown. Use WithSearchOptions to apply searchable-specific options like WithMinChars.
Example:
d := dropdown.NewSearchable("country", countries,
dropdown.WithPlaceholder("Search countries..."),
).WithSearchOptions(
dropdown.WithMinChars(2),
)
func (*Searchable) ClearSearch ¶
func (s *Searchable) ClearSearch()
ClearSearch clears the search query and shows all options.
func (*Searchable) Search ¶
func (s *Searchable) Search(query string)
Search filters options based on the query.
func (*Searchable) VisibleOptions ¶
func (s *Searchable) VisibleOptions() []Item
VisibleOptions returns the options to display (filtered if searching, all otherwise).
func (*Searchable) WithSearchOptions ¶
func (s *Searchable) WithSearchOptions(opts ...SearchableOption) *Searchable
WithSearchOptions applies searchable-specific options. Chainable.
type SearchableOption ¶
type SearchableOption func(*Searchable)
SearchableOption is a functional option for configuring searchable dropdowns.
func WithMinChars ¶
func WithMinChars(minChars int) SearchableOption
WithMinChars sets the minimum characters required before filtering starts.
func WithQuery ¶
func WithQuery(query string) SearchableOption
WithQuery sets the initial search query.
Source Files