Editor demo: https://bubble.io/page?id=testeplugins-85494&tab=Design&name=masked_input_demo&type=page&elements=bTJQN
### Step 1: Install the Plugin
1. Go to the Bubble Plugin Editor
2. Create a new plugin or open an existing one
3. Add a new **Element** (not Action)
4. Name it `Masked Input`

### Step 2: Add Properties
In the "Editable properties" section, add each property with the following configuration:

| Field Name | Caption | Type | Default Value |
|------------|---------|------|---------------|
| mask_format | Mask Format | text | |
| placeholder | Placeholder | text | |
| initial_value | Initial Value | text | |
| font_size | Font Size | number | 14 |
| font_color | Font Color | color | #333333 |
| font_weight | Font Weight | dropdown | 400 |
| font_family | Font Family | text | |
| text_align | Text Alignment | dropdown | left |
| italic | Italic | checkbox | |
| underline | Underline | checkbox | |
| padding_vertical | Padding Vertical | number | 0 |
| padding_horizontal | Padding Horizontal | number | 12 |
| disabled | Disabled | checkbox | |

**Dropdown choices for font_weight:**
```
100... 900



**Dropdown choices for text_align:**
```
left
center
right
```

### Step 3: Add Exposed States
In the "Exposed states" section, add:

| State Name | Caption | Type |
|------------|---------|------|
| value | Value | text |
| raw_value | Raw Value | text |
| is_complete | Is Complete | yes/no |

### Step 4: Add Events
In the "Events" section, add:

| Event Name | Caption |
|------------|---------|
| value_changed | Value Changed |
| focus | Focus |
| blur | Blur |

### Step 5: Add the Code
Copy the contents of `element.js` and paste it into the **Element code** field.

### Step 6: Style the Element
Use Bubble's native **Style** settings to customize:
- Background color
- Border color and width
- Border radius
- Shadow
- Padding (via element dimensions)

The input text area will automatically fill the element container.

### Step 7: Save and Test
Save your plugin and test it in a Bubble app!

---

## Common Use Cases

### Brazilian Documents (Digits Only)
- **CPF:** `000.000.000-00`
- **CNPJ:** `00.000.000/0000-00`
- **RG:** `00.000.000-0`

### Phone Numbers (Digits Only)
- **Brazilian Mobile:** `(00) 0 0000-0000`
- **Brazilian Landline:** `(00) 0000-0000`
- **US Phone:** `(000) 000-0000`
- **International:** `+00 00 0000-0000`

### Financial (Digits Only)
- **Credit Card:** `0000 0000 0000 0000`
- **CVV:** `000` or `0000`
- **Expiry Date:** `00/00`

### Address (Digits Only)
- **Brazilian ZIP (CEP):** `00000-000`
- **US ZIP:** `00000` or `00000-0000`

### Date & Time (Digits Only)
- **Date (DD/MM/YYYY):** `00/00/0000`
- **Date (MM/DD/YYYY):** `00/00/0000`
- **Time (HH:MM):** `00:00`
- **Time (HH:MM:SS):** `00:00:00`

### Vehicle License Plates (Mixed)
- **Brazilian (Old):** `AAA-0000` → ABC-1234
- **Brazilian (Mercosul):** `AAA0A00` → BRA2E19
- **US Standard:** `000-AAA` or `AAA-0000`

### Codes & Serials (Mixed)
- **Product Code:** `AAA-000` → PRD-123
- **Serial Number:** `****-****-****` → A1B2-C3D4-E5F6
- **Tracking Code:** `AA000000000AA` → BR123456789BR
- **Protocol:** `0000.AAAA.0000` → 2024.XPTO.0001