Interactive Form Elements
tagd-ai includes interactive form elements that turn static tags into dynamic, data-collecting experiences. These are perfect for templates, checklists, and feedback collection.
Available Form Elements
Toggle Switch
An on/off switch for binary choices.
Configuration:
- Label - Display name
- On/Off Labels - Custom text for each state (e.g., "Active"/"Inactive")
- Default Value - Initial state
Use cases:
- Equipment status (operational/down)
- Feature availability
- Approval indicators
Checkbox
A checkable box for confirmations or task tracking.
Configuration:
- Label - What to check off
- Default Value - Initially checked or not
Use cases:
- Checklists
- Acknowledgment confirmations
- Multi-item tracking
Text Input
A single-line text field for short responses.
Configuration:
- Label - Field name
- Placeholder - Hint text
- Max/Min Length - Character limits
- Pattern - Regex validation
Use cases:
- Serial numbers
- Names
- Short notes
Static Text
Non-editable display text for labels and instructions.
Configuration:
- Content - The text to display
- Variant - Heading level or body text (H1-H6, body, caption)
- Alignment - Left, center, or right
- Styling - Bold, italic, underline, color
Use cases:
- Section headers
- Instructions
- Labels
Number Input
A numeric field with validation.
Configuration:
- Label - Field name
- Min/Max - Value boundaries
- Step - Increment amount
- Default Value - Starting value
- Unit - Suffix like "kg", "$", "%"
- Display Type - Input field, slider, or gauge
Use cases:
- Measurements
- Counts
- Prices
Date/Time Picker
Select dates and/or times.
Configuration:
- Label - Field name
- Mode - Date only, time only, or both
- Default Value - "Now", tag creation time, or specific date
- Min/Max Date - Date range limits
Use cases:
- Scheduling
- Expiration dates
- Event logging
Slider
A draggable value selector within a range.
Configuration:
- Label - Field name
- Min/Max - Range boundaries
- Step - Increment amount
- Default Value - Starting position
- Show Value - Display current value
- Unit - Suffix label
- Marks - Labels at specific points
Use cases:
- Ratings
- Percentages
- Adjustable values
Rating
Star or icon-based rating input.
Configuration:
- Label - What's being rated
- Max Rating - Number of stars (default 5)
- Allow Half - Enable half-star ratings
- Icon - Star, heart, or thumb
- Size - Small, medium, or large
Use cases:
- Reviews
- Quality ratings
- Satisfaction scores
Dropdown (Select)
Choose from a list of options.
Configuration:
- Label - Field name
- Options - List of choices (value and label pairs)
- Default Value - Pre-selected option
- Multiple - Allow selecting multiple options
- Searchable - Enable filtering options
Use cases:
- Categories
- Status selection
- Configuration options
Radio Buttons
Choose one option from a visible list.
Configuration:
- Label - Question or field name
- Options - List of choices
- Default Value - Pre-selected option
- Layout - Vertical or horizontal
Use cases:
- Single-choice questions
- Mode selection
- Exclusive options
Color Picker
Select a color value.
Configuration:
- Label - Field name
- Default Value - Initial color (hex)
- Show Alpha - Enable transparency
Use cases:
- Customization settings
- Color coding
- Design preferences
Progress Bar
Display progress as a visual bar.
Configuration:
- Label - What progress represents
- Value - Percentage complete (0-100)
- Show Percentage - Display number
- Color - Bar color
- Height - Bar thickness
Use cases:
- Project completion
- Loading status
- Goal tracking
Counter
Increment/decrement buttons with a number.
Configuration:
- Label - What's being counted
- Default Value - Starting number
- Min/Max - Boundaries
- Step - Increment amount
Use cases:
- Inventory counts
- Quantity selection
- Simple tallies
Adding Form Elements
- Click the floating + button
- Select Form Elements
- Choose the element type
- Configure in the dialog that appears
- Click Add to insert
Configuring Elements
Each form element opens a configuration dialog where you set:
Common Settings
- Label - Display name (required)
- Required - Must be filled before saving
- Help Text - Additional instructions
- Placeholder - Hint for empty fields
Type-Specific Settings
Each element type has unique options as described above.
Validation
Form elements can enforce validation rules:
- Required - Field cannot be empty
- Min/Max - Value boundaries
- Pattern - Regex format matching
- Custom - Custom validation logic
Invalid values show error messages and prevent saving.
Using with Templates
Form elements are especially powerful in templates:
- Create a template with form elements
- Define the structure once
- Generate tags from the template
- Each tag gets its own values
See Templates for more details.
Data Collection
Form element values are saved with the tag:
- Automatic saving - Values save as they change
- Timestamp tracking - When each value was modified
- History - Previous values preserved (coming soon)
Best Practices
Labeling
- Use clear, descriptive labels
- Add help text for complex fields
- Keep labels concise
Validation
- Set reasonable min/max values
- Use required sparingly
- Provide helpful error messages
Organization
- Group related elements together
- Use static text for section headers
- Add dividers between groups
Mobile
- Test on mobile devices
- Ensure touch targets are large enough
- Consider vertical layouts
Example: Equipment Checklist
Static Text: "Pre-Operation Checklist"
Checkbox: "Safety equipment inspected"
Checkbox: "Fluid levels checked"
Checkbox: "No visible damage"
Static Text: "Equipment Status"
Toggle: "Operational" (On/Off)
Rating: "Condition" (5 stars)
Text Input: "Notes"
Date/Time: "Inspection Date" (default: now)