README

Input

BladewindUI — Input field component.

Installation

composer require mkocansey/bladewind-input

Or install the full library:

composer require mkocansey/bladewind

Input masking

The input field supports masking, modelled on the Alpine.js mask plugin. Use the wildcards 9 (digit), a (letter) and * (alphanumeric) in a template — every other character is a literal that is inserted automatically as the user types.

<x-bladewind::input name="phone" mask="(999) 999-9999" />          {{-- 9 → digit --}}
<x-bladewind::input name="postcode" mask="a9a 9a9" />              {{-- a → letter --}}
<x-bladewind::input name="key" mask="****-****-****" />            {{-- * → letter or digit --}}

Dynamic masks change as the user types. A creditCard mask is built in (detects Amex / Diners / Visa-style cards) and needs no JavaScript:

<x-bladewind::input name="card" dynamicMask="creditCard" />

For your own dynamic masks, point dynamicMask at a global JS function that returns a template for the current value. A global of the same name as a built-in takes precedence, so you can override creditCard too:

<x-bladewind::input name="zip" dynamicMask="zipCode" />

<script>
    function zipCode(input) {
        const digits = input.replace(/\D/g, '');
        return digits.length <= 5 ? '99999' : '99999-9999'; // ZIP or ZIP+4
    }
</script>

Money inputs add thousands separators and fix the decimal places. Customise the separators and precision:

<x-bladewind::input name="price" money="true" />
<x-bladewind::input name="price_eu" money="true"
    moneyThousandsSeparator="." moneyDecimalSeparator="," moneyPrecision="2" />

Masking forces the field to type="text" so formatted values (separators, letters) are preserved.

Documentation

Full documentation, live demos, and all available attributes are at bladewindui.com.

License

MIT — see the LICENSE file.