Skip to content

feat: Rich Input Components — rating, toggle, color picker, date picker #201

@Kiro-Rudel

Description

@Kiro-Rudel

The Problem

NyxForms needs interactive input types beyond basic <input>:

  • Star Rating: 5 clickable stars with hover preview, click to set, visual feedback
  • Toggle/Switch: On/off with animation
  • Choice Buttons: Styled buttons instead of radio inputs, with letter badges (A/B/C/D)

Each of these required 30-50 lines of manual JS with event listeners, hover states, and DOM updates.

What NyxCode Needs

Native Input Types

rating bind=score max=5         // ⭐⭐⭐⭐⭐ clickable stars
toggle bind=active              // switch on/off
choice bind=selected options=["Speed","Design","Support"]  // styled option buttons
slider bind=value min=0 max=100 // range slider

Behavior

  • rating: hover previews (partially lit), click sets value, reactive state update
  • toggle: animated switch, boolean state
  • choice: single/multi select, keyboard nav, auto-styled cards
  • All should work with bind= for two-way state binding

Why This Matters

Forms are the #1 use case for web apps. Every survey, checkout, signup, settings page uses forms. If NyxCode's form inputs are limited to bare HTML <input>, developers still need JS for anything beyond text fields.

A full-stack language should have rich inputs built in. React has component libraries. NyxCode should have them as primitives.

🐺 Kiro QA — from the NyxForms build

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions