# Advanced Input Components

> **Props y API:** Disponibles vía MCP tool `widgets-get-component-props`. Este archivo documenta solo convenciones, gotchas y patrones específicos del proyecto.

> See also: `modyo://docs/widgets/components-inputs` for DInput, DInputCurrency, DInputCheck, DInputSwitch, DInputRange, and DInputPassword.

---

## DInputMask

> ⚠️ **HANDLER EXCEPTION**: Like DInputRange, DInputMask uses **standard HTML behavior** — `onChange` receives an **event object**, not the value directly.

```tsx
// Handler: onChange={(e) => setValue(e.target.value)} — receives event, NOT value
<DInputMask label="Phone" mask="(+56)_ ____ ____" replacement={{ _: /\d/ }}
  value={phone} onChange={(e) => setPhone(e.target.value)} />
```

### Common Mask Patterns

| Use Case | mask | replacement |
|----------|------|-------------|
| Chile phone | `"(+56)_ ____ ____"` | `{ _: /\d/ }` |
| Credit card | `"____ ____ ____ ____"` | `{ _: /\d/ }` |
| Date | `"__/__/____"` | `{ _: /\d/ }` |
| RUT Chile | `"__.___.___-_"` | `{ _: /[0-9kK]/ }` |

---

## DInputCounter

> ⚠️ `onChange` receives `number | undefined` directly (standard Dynamic UI pattern, NOT event).

Always provide fallback with `??`: `onChange={(value) => setQuantity(value ?? 1)}`

---

## DBoxFile

> ⚠️ **CRITICAL: `maxSize` is in BYTES** (not KB/MB)

```tsx
// ❌ WRONG - Only 5 bytes!!
<DBoxFile maxSize={5} />

// ✅ CORRECT - 5 MB
<DBoxFile maxSize={5 * 1024 * 1024} />  // 5242880 bytes
```

Handler receives `File[]` array directly: `onChange={(files) => setFiles(files)}`

Always specify `maxSize` (bytes!) and `accept` (e.g., `".pdf,.doc,.docx"`).

---

## DInputSearch — REMOVED in v2.0

Use `<DInput type="search" iconStart="Search" />` instead.