Dropdown single-select input for choosing from predefined options.
Preview
code
1[Select an option... ▼]Usage
go
1node := models.WidgetNode{2 Type: models.WidgetNodeTypeSelect,3 Name: "role",4 Placeholder: "Select role",5 Options: []models.WidgetSelectOption{6 {Label: "Admin", Value: "admin"},7 {Label: "Editor", Value: "editor"},8 {Label: "Viewer", Value: "viewer"},9 },10}Props
| Name | Type | Description | Default |
|---|---|---|---|
type | "select" | Node type | required |
name | string | Form field name (key in form data) | required |
placeholder | string | Placeholder text when no selection | "Select..." |
options | WidgetSelectOption[] | Available options | required |
WidgetSelectOption
| Name | Type | Description |
|---|---|---|
label | string | Display text |
value | string | Value submitted in form data |
Examples
Basic Select
go
1{2 Type: models.WidgetNodeTypeSelect,3 Name: "priority",4 Placeholder: "Select priority",5 Options: []models.WidgetSelectOption{6 {Label: "Low", Value: "low"},7 {Label: "Medium", Value: "medium"},8 {Label: "High", Value: "high"},9 },10}With Form Layout
go
1{2 Type: models.WidgetNodeTypeCol,3 Gap: 3,4 Children: []models.WidgetNode{5 {Type: models.WidgetNodeTypeText, Value: "Assign to:", Variant: "muted"},6 {7 Type: models.WidgetNodeTypeSelect,8 Name: "assignee",9 Placeholder: "Select team member",10 Options: []models.WidgetSelectOption{11 {Label: "Alice", Value: "alice"},12 {Label: "Bob", Value: "bob"},13 {Label: "Charlie", Value: "charlie"},14 },15 },16 },17}Dynamic Options
Build options from data:
go
1func buildUserSelectOptions(users []User) []models.WidgetSelectOption {2 options := make([]models.WidgetSelectOption, len(users))3 for i, user := range users {4 options[i] = models.WidgetSelectOption{5 Label: user.Name,6 Value: user.ID,7 }8 }9 return options10}11 12node := models.WidgetNode{13 Type: models.WidgetNodeTypeSelect,14 Name: "user_id",15 Placeholder: "Select user",16 Options: buildUserSelectOptions(users),17}Form Data
When the widget is submitted, the selected value is included:
json
1{2 "priority": "high",3 "assignee": "alice"4}TypeScript
typescript
1const node: WidgetNode = {2 type: "select",3 name: "role",4 placeholder: "Select role",5 options: [6 { label: "Admin", value: "admin" },7 { label: "User", value: "user" },8 ],9}Best Practices
- Use descriptive labels - Make options clear and unambiguous
- Order logically - Alphabetical, by frequency, or by importance
- Limit options - For 2-3 options, consider radio buttons instead
- Include placeholder - Help users understand what to select