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 |
required | boolean | Whether selection is required | false |
onChangeAction | WidgetAction | Action triggered when selection changes | - |
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}Select with Change Action
Trigger an action immediately when the selection changes:
go
1{2 Type: models.WidgetNodeTypeSelect,3 Name: "country",4 Placeholder: "Select country",5 Options: []models.WidgetSelectOption{6 {Label: "United States", Value: "us"},7 {Label: "United Kingdom", Value: "uk"},8 {Label: "Canada", Value: "ca"},9 },10 OnChangeAction: &models.WidgetAction{11 Type: "country_changed",12 Handler: "client",13 },14}With Form Layout
go
1widget := &models.Widget{2 Type: models.WidgetTypeUI,3 Title: "Assign Task",4 Children: []models.WidgetNode{5 {6 Type: models.WidgetNodeTypeCol,7 Gap: 3,8 Children: []models.WidgetNode{9 {Type: models.WidgetNodeTypeLabel, Value: "Assignee", FieldName: "assignee"},10 {11 Type: models.WidgetNodeTypeSelect,12 Name: "assignee",13 Placeholder: "Select team member",14 Options: []models.WidgetSelectOption{15 {Label: "Alice", Value: "alice"},16 {Label: "Bob", Value: "bob"},17 {Label: "Charlie", Value: "charlie"},18 },19 },20 {Type: models.WidgetNodeTypeLabel, Value: "Priority", FieldName: "priority"},21 {22 Type: models.WidgetNodeTypeSelect,23 Name: "priority",24 Placeholder: "Select priority",25 Options: []models.WidgetSelectOption{26 {Label: "Low", Value: "low"},27 {Label: "Medium", Value: "medium"},28 {Label: "High", Value: "high"},29 },30 },31 {32 Type: models.WidgetNodeTypeRow,33 Gap: 2,34 Justify: "end",35 Children: []models.WidgetNode{36 {37 Type: models.WidgetNodeTypeButton,38 Label: "Assign",39 Variant: "default",40 OnClickAction: &models.WidgetAction{41 Type: "assign_task",42 LoadingBehavior: "self",43 },44 },45 },46 },47 },48 },49 },50}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}1112node := 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 onChangeAction: {10 type: "role_changed",11 handler: "client",12 },13}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
- Use onChangeAction for dependent fields - Update other fields based on selection