# 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 [PATTERNS.md](PATTERNS.md).
---
## ct-button
```tsx
// Inline handler
count.set(count.get() + 1)}>Increment
// handler() for complex logic
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 `