@andrej1811/web-components-input

A premium, lightweight collection of Web Components for building beautiful and accessible forms. Includes built-in validation, i18n support, and easy integration with any framework (React, Vue, etc.) or Vanilla JS.

Features

• 🎨 Beautiful & Customizable: Styled with CSS variables.
• ✅ Built-in Validation: Helper for email, phone, personal ID, etc.
• 🔙 Backend Validation Support: Easily display server-side errors.
• 📦 Zero Dependencies: Pure Web Components.
• 🌳 Tree-Shakable: Import only what you need.

Installation

npm install @andrej1811/web-components-input

Usage

1. Import the library

Importing the library registers the custom elements automatically.

Import everything:

import '@andrej1811/web-components-input';

Or import only specific components (Optimized):

import '@andrej1811/web-components-input/input';
import '@andrej1811/web-components-input/select';

2. Use in HTML

You can now use the <nex-*> tags in your HTML or JSX.

<nex-input 
  label="Username" 
  placeholder="Enter username" 
  required 
  validator="username"
></nex-input>

<nex-select
  label="Country"
  options='[{"value": "sk", "label": "Slovakia"}, {"value": "cz", "label": "Czechia"}]'
></nex-select>

Components

<nex-input>

Standard text input with validation support.

• Attributes: label, placeholder, required, disabled, type (text, email, password...), validator.

<nex-textarea>

Textarea for longer content.

• Attributes: label, rows, cols, maxlength, ...

<nex-select>

Dropdown select component.

• Attributes: options (JSON string of {value, label} objects).

<nex-multiselect>

Select multiple options with chips display.

• Attributes: options.
• Value: Returns an array of strings ['value1', 'value2'].

<nex-checkbox>

Checkbox with support for HTML content in label.

<nex-checkbox required>
  I agree to <a href="/terms">Terms</a>
</nex-checkbox>

<nex-radio-group>

Group of radio buttons.

• Attributes: direction ("column" | "row"), options.

Validation

Client-Side

Use the validator attribute with comma-separated rules. Available rules: email, phone, url, ico, birthNumber, username, password.

<nex-input validator="email, required"></nex-input>

Server-Side (Backend)

To display errors from your backend (e.g., Laravel), set the error-message attribute.

// JS: Set error manually
const input = document.querySelector('#email-input');
input.setAttribute('error-message', 'This email is already taken.');

The error will persist until the user modifies the field value.

Styling (CSS Variables)

You can customize the look by overriding these CSS variables in your root or component scope:

:root {
    --primary-color: #2563eb;
    
    /* Layout */
    --form-radius: 6px;
    --form-padding-y: 0.625rem;
    --form-padding-x: 0.75rem;

    /* Colors */
    --form-bg: #ffffff;
    --form-border-color: #d1d5db;
    --form-focus-border: #2563eb;
    --form-focus-shadow: rgba(37, 99, 235, 0.15);
    --form-error-color: #dc2626;
    
    /* Typography */
    --form-font-family: inherit;
    --form-label-color: #374151;
}

Localization (i18n)

Default language is Slovak (sk). To switch to English:

import { setLanguage } from '@andrej1811/web-components-input';

setLanguage('en');

License

MIT