MevKit JS - Custom HTML5 Elements
MevKit is a lightweight JavaScript kit that upgrades native HTML5 inputs into modern, customizable, and developer-friendly web components.
Why MevKit?
- Modern UI: Say goodbye to boring default HTML inputs.
- Custom Elements: Built on native Web Components.
- Zero Dependencies: No frameworks, no bloat.
- CDN Ready: Plug & play in seconds.
- Developer Friendly: Clean syntax & flexible options.
Installation
Include the MevKit stylesheet and JavaScript file via CDN.
Elements Reference
This section documents all available MevKit custom elements, their purpose, and supported properties (props).
<mevkit-input>
The mevkit-input element is a powerful replacement for native HTML inputs, supporting multiple types with enhanced UI and behavior.
Supported Types
textpasswordnumberrangecolordatefileselecttextarea
Common Props
| Prop | Type | Description |
|---|---|---|
type | string | Defines the input type (text, number, select, etc). |
placeholder | string | Placeholder text shown when the input is empty. |
value | string | number | Initial value of the input. |
disabled | boolean | Disables the input interaction. |
Number / Range Props
min | number | Minimum allowed value. |
max | number | Maximum allowed value. |
step | number | Step increment value. |
Select Props
multiple | boolean | Allows selecting multiple options. |
search | boolean | Enables search inside the dropdown. |
Textarea Props
min-rows | number | Minimum visible rows. |
max-rows | number | Maximum auto-expanded rows. |
maxlength | number | Maximum allowed characters. |
Examples
Below are some examples of MevKit custom input elements.