Select

View Original

A native select dropdown with label, validation states, and support for Alpine.js binding.

Goshtoso Component

Go + Templ

Default Select

Operating System

Error State

Operating System

Error: Please select an operating system

Success State

Operating System

Country Select

Country

Dependent Selects

Model

Year

Disabled

Operating System

Readonly

Usage Example

// Default Select
@selectfield.Select(selectfield.Config{
    ID:    "os",
    Name:  "os",
    Label: "Operating System",
    Options: []selectfield.Option{
        {Value: "mac", Label: "Mac"},
        {Value: "windows", Label: "Windows"},
        {Value: "linux", Label: "Linux"},
    },
})

// Select with Error State
@selectfield.Select(selectfield.Config{
    ID:         "os-error",
    Name:       "os",
    Label:      "Operating System",
    State:      selectfield.StateError,
    HelperText: "Error: Please select an operating system",
    Options: []selectfield.Option{
        {Value: "mac", Label: "Mac"},
        {Value: "windows", Label: "Windows"},
        {Value: "linux", Label: "Linux"},
    },
})

// Select with Success State
@selectfield.Select(selectfield.Config{
    ID:    "os-success",
    Name:  "os",
    Label: "Operating System",
    State: selectfield.StateSuccess,
    Options: []selectfield.Option{
        {Value: "mac", Label: "Mac", Selected: true},
        {Value: "windows", Label: "Windows"},
        {Value: "linux", Label: "Linux"},
    },
})

// Disabled Select
@selectfield.Select(selectfield.Config{
    ID:       "os-disabled",
    Name:     "os",
    Label:    "Operating System",
    Disabled: true,
    Options: []selectfield.Option{
        {Value: "mac", Label: "Mac"},
    },
})

Pagination Tags List