Accessible label for a form field.
Preview
code
1Email2[________________]Usage
go
1node := models.WidgetNode{2 Type: models.WidgetNodeTypeLabel,3 Value: "Email",4 FieldName: "email",5}Props
| Name | Type | Description | Default |
|---|---|---|---|
type | "label" | Node type | required |
value | string | Text content of the label | required |
fieldName | string | Name of the field this label describes | required |
size | string | Size token: xs, sm, md, lg, xl | "sm" |
weight | string | Font weight: normal, medium, semibold, bold | "medium" |
color | string | ThemeColor | Text color | - |
textAlign | string | Horizontal alignment | "start" |
Examples
Basic Label
go
1{2 Type: models.WidgetNodeTypeCol,3 Gap: 1,4 Children: []models.WidgetNode{5 {Type: models.WidgetNodeTypeLabel, Value: "Email", FieldName: "email"},6 {Type: models.WidgetNodeTypeInput, Name: "email", Placeholder: "[email protected]"},7 },8}Form with Labels
go
1widget := &models.Widget{2 Type: models.WidgetTypeUI,3 Title: "Contact Form",4 Interactive: true,5 Children: []models.WidgetNode{6 {7 Type: models.WidgetNodeTypeCol,8 Gap: 3,9 Children: []models.WidgetNode{10 // Name field11 {Type: models.WidgetNodeTypeCol, Gap: 1, Children: []models.WidgetNode{12 {Type: models.WidgetNodeTypeLabel, Value: "Name", FieldName: "name"},13 {Type: models.WidgetNodeTypeInput, Name: "name", Placeholder: "Your name"},14 }},15 // Email field16 {Type: models.WidgetNodeTypeCol, Gap: 1, Children: []models.WidgetNode{17 {Type: models.WidgetNodeTypeLabel, Value: "Email", FieldName: "email"},18 {Type: models.WidgetNodeTypeInput, Name: "email", Placeholder: "[email protected]"},19 }},20 },21 },22 },23 Actions: []models.WidgetActionButton{24 {Label: "Submit", Action: models.WidgetAction{Type: "submit"}},25 },26}Label with Required Indicator
go
1{2 Type: models.WidgetNodeTypeRow,3 Gap: 1,4 Children: []models.WidgetNode{5 {Type: models.WidgetNodeTypeLabel, Value: "Password", FieldName: "password"},6 {Type: models.WidgetNodeTypeText, Value: "*", Variant: "muted"},7 },8}TypeScript
typescript
1const node: WidgetNode = {2 type: "label",3 value: "Email",4 fieldName: "email",5}Accessibility
Labels are important for accessibility:
- Screen readers announce the label when the field is focused
- Clicking the label focuses the associated input
- The
fieldNameprop links the label to the input via thenameattribute
Best Practices
- Always use with inputs - Every form field should have a label
- Keep labels short - 1-3 words
- Match fieldName to input name - Ensures proper association
- Stack vertically - Label above input is most readable