Built-in form components: Switch, Input, Select, Checkbox, Radio

Summary

Add styled, reactive form components that integrate with stx's signals system. These replace raw HTML inputs with consistent styling, dark mode, validation, and x-model binding.

Components

<StxSwitch> / <StxToggle>

<StxSwitch x-model="darkMode" label="Dark Mode" />
<StxSwitch x-model="notifications" size="lg" color="green" disabled />

Props: x-model, label, size (sm/md/lg), color, disabled, description

<StxInput>

<StxInput x-model="email" type="email" label="Email" placeholder="you@example.com" required />
<StxInput x-model="search" icon="search" clearable />

Props: x-model, type, label, placeholder, icon, clearable, disabled, error, hint, required, size

<StxTextarea>

<StxTextarea x-model="bio" label="Bio" rows="4" maxlength="500" autoresize />

Props: x-model, label, rows, maxlength, autoresize, placeholder, error, hint

<StxSelect>

<StxSelect x-model="role" label="Role" :options="['Admin', 'Editor', 'Viewer']" />
<StxSelect x-model="country" label="Country" searchable multiple>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
</StxSelect>

Props: x-model, label, options (array or slot), searchable, multiple, placeholder, clearable, disabled

<StxCheckbox>

<StxCheckbox x-model="terms" label="I agree to the terms" required />

Props: x-model, label, description, disabled, indeterminate, color

<StxRadioGroup>

<StxRadioGroup x-model="plan" label="Plan">
  <StxRadio value="free" label="Free" description="Basic features" />
  <StxRadio value="pro" label="Pro" description="All features" />
</StxRadioGroup>

Shared features

• All support x-model for two-way signal binding
• Consistent sizing (sm/md/lg)
• Dark mode via CSS variables
• Validation states (error/success with messages)
• Disabled/readonly states
• Keyboard accessible, ARIA labels
• Crosswind utility class compatible

Delivered via @stacksjs/components, which ships with every stx app and is auto-registered (no import needed in .stx files). See CLAUDE.md § "Reach for stx primitives before vanilla JS" for the full inventory; the relevant components for this request are documented there.

Closing as effectively delivered. If a specific behavior or API affordance from the original request is missing from the shipped components, please open a focused ticket against @stacksjs/components describing the exact gap — that's easier to track than a broad "make it a builtin" ask.