@mfp-design-system/input

A Lit-based <mfp-input> web component. Works in any framework that supports custom elements.

Install

npm install @mfp-design-system/input @mfp-design-system/tokens

@mfp-design-system/tokens is an optional peer — the component has fallback values, but loading the tokens gives it the canonical look.

Usage

import '@mfp-design-system/input';
import '@mfp-design-system/tokens/css';

<mfp-input label="Email" type="email" placeholder="[email protected]"></mfp-input>

<mfp-input label="Password" type="password" required></mfp-input>

<mfp-input label="Search" type="search">
    <span slot="prefix">🔍</span>
</mfp-input>

<mfp-input label="Name" hint="Your full legal name"></mfp-input>

<mfp-input label="Email" type="email" error="Please enter a valid email address"></mfp-input>

<mfp-input size="sm" placeholder="Small"></mfp-input>
<mfp-input size="md" placeholder="Medium"></mfp-input>
<mfp-input size="lg" placeholder="Large"></mfp-input>

<mfp-input disabled value="Can't touch this"></mfp-input>
<mfp-input readonly value="Look but don't touch"></mfp-input>

API

| Attribute | Type | Default | Description | | ------------- | --------------------------------------------------------------------------- | -------- | -------------------------------------------- | | type | 'text' \| 'email' \| 'password' \| 'number' \| 'search' \| 'tel' \| 'url' | 'text' | Native input type | | size | 'sm' \| 'md' \| 'lg' | 'md' | Sizing | | value | string | '' | Current value (controlled) | | name | string | '' | Native form name | | label | string | '' | Visible label (also wires for/id) | | placeholder | string | '' | Placeholder text | | hint | string | '' | Helper text shown below the input | | error | string | '' | Error message — also triggers invalid styles | | disabled | boolean | false | Disables the input | | readonly | boolean | false | Makes the input read-only | | required | boolean | false | Marks as required (adds * to label) |

Events

• input — fires on every keystroke. event.detail.value carries the current value.
• change — fires on commit (blur or Enter), per native <input> semantics.

Slots

• prefix — content before the input (icons, currency symbols, etc.)
• suffix — content after the input (clear button, units, etc.)

Shadow parts

For custom styling: label, control, input, hint, error.

mfp-input::part(input) {
    border-radius: 0;
}
mfp-input::part(label) {
    text-transform: uppercase;
}

Framework notes

• Vue 3 / Nuxt: set compilerOptions.isCustomElement: (tag) => tag.startsWith('mfp-')
• Angular: add CUSTOM_ELEMENTS_SCHEMA to modules using the component
• React 19+: works natively

Forms

<mfp-input> is form-associated via ElementInternals:

• Its value is submitted with the form under the configured name
• required triggers native valueMissing validation
• error (when set) becomes a custom validity message
• checkValidity() and reportValidity() mirror the native HTMLInputElement methods

<form @submit.prevent="onSubmit">
    <mfp-input name="email" type="email" required label="Email"></mfp-input>
    <mfp-button type="submit">Submit</mfp-button>
</form>