# UI Components Reference CommonTools UI components with bidirectional binding support. ## Bidirectional Binding Use `$` prefix for automatic two-way sync. No handler needed for simple updates. ```tsx // Auto-syncs checkbox state // Auto-syncs text input ``` **Native HTML inputs are one-way only.** Always use `ct-*` components for form inputs. For when to use handlers vs binding, see [two-way-binding](../patterns/two-way-binding.md). ## Property Names: Use CamelCase Use camelCase for `ct-*` component properties. Kebab-case JSX attributes don't map correctly: ```tsx // ❌ Kebab-case won't work // Sets element["allow-custom"], not allowCustom // ✅ CamelCase works // Sets element.allowCustom correctly ``` --- ## ct-button ```tsx // Simple inline handler count.set(count.get() + 1)}>Increment // action() for more complex logic (preferred) const increment = action(() => { count.set(count.get() + 1); lastUpdated.set(Date.now()); }); Increment ``` --- ## ct-input ```tsx // Bidirectional binding (preferred) // With placeholder // Manual handler for side effects { title.set(e.detail.value); console.log("Changed:", e.detail.value); }} /> ``` --- ## ct-checkbox ```tsx // Bidirectional binding {item.title} // In array maps {items.map((item) => ( {item.title} ))} ``` --- ## ct-select Uses `items` attribute with `{ label, value }` objects. **Do not use `