@papit/input

A form-associated text input with optional format masking, a password visibility toggle and a clear button.

Installation

npm install @papit/input

To use in html

<script type="module" defer>
  import "@papit/input";
</script>

<pap-input name="email" type="email" placeholder="[email protected]"></pap-input>

Usage

Format masking

Use x as a placeholder character in format. Typed input is inserted into the mask automatically and non-x characters are treated as literals.

<pap-input format="(xxx) xxx-xxxx" placeholder="(555) 123-4567"></pap-input>
<pap-input format="xxxx-xxxx-xxxx-xxxx" placeholder="Card number"></pap-input>

Password field

When type="password", an eye icon button is shown to toggle visibility.

<pap-input type="password" name="password"></pap-input>

Clearable

Set clear to show a button that resets the value once it's non-empty.

<pap-input clear placeholder="Search..."></pap-input>

Form association

pap-input participates in native forms via ElementInternals. Setting defaultvalue restores that value on form.reset().

<form>
  <pap-input name="username" defaultvalue="guest" required></pap-input>
  <button type="submit">Submit</button>
</form>

Enter in the field submits the form, like a native input (not while an IME is composing).

Accessibility

The textbox is the native <input> inside the shadow root. The host forwards its naming to it:

| On the host | Becomes on the inner input | | -------------------------------------- | ------------------------------------------------- | | aria-label | its aria-label (kept in sync) | | aria-labelledby / aria-describedby | the referenced elements, by ID in the host's root | | <label for="host-id"> | its label |

IDs are resolved on connect and when these attributes change. The clear and password buttons are named "Clear" and "Show password" (with aria-pressed), translatable through the aria.clear and aria.password keys.

Attributes

| Attribute | Type | Default | Description | | ------------------------- | -------------------------- | -------- | ----------------------------------- | | type | string | "text" | Native input type | | format | string | — | Mask pattern, x as placeholder | | value | string \| number \| Date | null | Current value | | defaultvalue | string | — | Value restored on form reset | | clear | boolean | false | Show clear button | | required | boolean | false | Marks field as required | | placeholder | string | — | Native placeholder | | min / max | number | — | Native min/max (numeric types) | | minlength / maxlength | number | — | Native min/max length | | pattern | string | — | Native validation pattern | | accept | string | — | Accepted file types (type="file") | | autocomplete | string | "on" | Native autocomplete |

License

Licensed under the @Papit License 1.0 - Copyright (c) 2024 Henry Pap (@onkelhoy)

Key points:

• ✅ Free to use in commercial projects
• ✅ Free to modify and distribute
• ✅ Attribution required
• ❌ Cannot resell the component itself as a standalone product

See the LICENSE file for full details.

Related Components

• @papit/web-component: Core utilities, decorators, and base component class
• @papit/field: Base class providing labels, error states, and form field layout