stenc-input

stenc-input

A form-associated input web component built with Stencil. Fully integrates with HTML forms, supports validation, and works seamlessly with form submission.

Features

✅ Form-Associated - Works natively with HTML forms using ElementInternals API ✅ Full Validation Support - Built-in HTML5 validation (required, pattern, minlength, etc.) ✅ Custom Validation - Support for custom validation messages ✅ Accessible - ARIA attributes for screen readers ✅ Styled States - Focus, error, disabled, readonly states ✅ Type Support - text, email, password, number, tel, url, search ✅ Size Variants - small, medium, large ✅ Dark Mode - Automatic dark mode support

Installation

npm install stenc-input

Usage

Import the Component

import 'stenc-input';

Using with Script Tag

<script type="module" src="https://unpkg.com/stenc-input/dist/stenc-input/stenc-input.esm.js"></script>

Examples

Basic Input

<poc-input
  label="Username"
  name="username"
  placeholder="Enter your username"
></poc-input>

Required Field with Validation

<poc-input
  label="Email"
  name="email"
  type="email"
  required
  placeholder="[e-mail]"
  helper-text="We'll never share your email"
></poc-input>

Password Input

<poc-input
  label="Password"
  name="password"
  type="password"
  required
  minlength="8"
  placeholder="At least 8 characters"
></poc-input>

With Custom Validation

<poc-input
  label="Phone"
  name="phone"
  type="tel"
  pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
  placeholder="123-456-7890"
></poc-input>

Different Sizes

<poc-input size="small" label="Small Input"></poc-input>
<poc-input size="medium" label="Medium Input"></poc-input>
<poc-input size="large" label="Large Input"></poc-input>

Disabled and Readonly

<poc-input label="Disabled" value="Cannot edit" disabled></poc-input>
<poc-input label="Readonly" value="Can view only" readonly></poc-input>

With Error Message

<poc-input
  label="Username"
  name="username"
  value="ab"
  error-message="Username must be at least 3 characters"
></poc-input>

In a Form

<form id="signup-form">
  <poc-input
    label="Username"
    name="username"
    required
    minlength="3"
  ></poc-input>

  <poc-input
    label="Email"
    name="email"
    type="email"
    required
  ></poc-input>

  <poc-input
    label="Password"
    name="password"
    type="password"
    required
    minlength="8"
  ></poc-input>

  <button type="submit">Sign Up</button>
</form>

<script>
  document.getElementById('signup-form').addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    console.log(Object.fromEntries(formData));
  });
</script>

Props

Property	Attribute	Type	Default	Description
value	value	string	''	The input value
name	name	string	''	The input name (for form submission)
type	type	'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'	'text'	The input type
label	label	string	''	Input label text
placeholder	placeholder	string	''	Placeholder text
required	required	boolean	false	Whether the input is required
disabled	disabled	boolean	false	Whether the input is disabled
readonly	readonly	boolean	false	Whether the input is readonly
minlength	minlength	number	undefined	Minimum length validation
maxlength	maxlength	number	undefined	Maximum length validation
pattern	pattern	string	undefined	Regex pattern for validation
size	size	'small' | 'medium' | 'large'	'medium'	Input size variant
errorMessage	error-message	string	''	Custom error message to display
helperText	helper-text	string	''	Helper text displayed below input
autocomplete	autocomplete	string	'off'	Autocomplete attribute

Events

Event	Description	Detail Type
pocInputChange	Emitted when the value changes	string
pocInputFocus	Emitted when input receives focus	FocusEvent
pocInputBlur	Emitted when input loses focus	FocusEvent
pocInputCommit	Emitted when value is committed (Enter key or blur)	string

Methods

Method	Description	Returns
setFocus()	Programmatically focus the input	Promise<void>
select()	Select the input text	Promise<void>
getValidity()	Get the input validity state	Promise<ValidityState | undefined>
checkValidity()	Check if the input is valid	Promise<boolean>
setCustomValidity(message: string)	Set a custom validation message	Promise<void>

Framework Integration

React

import { defineCustomElements } from 'stenc-input/loader';

// Call this once in your app entry point
defineCustomElements();

function SignupForm() {
  const [username, setUsername] = useState('');

  const handleChange = (e) => {
    setUsername(e.detail);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    console.log(Object.fromEntries(formData));
  };

  return (
    <form onSubmit={handleSubmit}>
      <poc-input
        label="Username"
        name="username"
        value={username}
        required
        onPocInputChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Vue

<template>
  <form @submit.prevent="handleSubmit">
    <poc-input
      label="Username"
      name="username"
      :value="username"
      required
      @pocInputChange="handleChange"
    />
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { defineCustomElements } from 'stenc-input/loader';
defineCustomElements();

export default {
  data() {
    return {
      username: ''
    };
  },
  methods: {
    handleChange(event) {
      this.username = event.detail;
    },
    handleSubmit(event) {
      const formData = new FormData(event.target);
      console.log(Object.fromEntries(formData));
    }
  }
};
</script>

Angular

In your main.ts:

import { defineCustomElements } from 'stenc-input/loader';
defineCustomElements();

Add to your module:

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

In your component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-signup',
  template: `
    <form (submit)="onSubmit($event)">
      <poc-input
        label="Username"
        name="username"
        required
        (pocInputChange)="onUsernameChange($event)"
      ></poc-input>
      <button type="submit">Submit</button>
    </form>
  `
})
export class SignupComponent {
  username = '';

  onUsernameChange(event: CustomEvent) {
    this.username = event.detail;
  }

  onSubmit(event: Event) {
    event.preventDefault();
    const formData = new FormData(event.target as HTMLFormElement);
    console.log(Object.fromEntries(formData));
  }
}

Form Association

This component uses the ElementInternals API to fully integrate with HTML forms:

<form id="myForm">
  <poc-input name="email" type="email" required></poc-input>
  <poc-input name="age" type="number" min="18"></poc-input>
  <button type="submit">Submit</button>
</form>

<script>
  const form = document.getElementById('myForm');

  form.addEventListener('submit', (e) => {
    e.preventDefault();

    // Form validation happens automatically
    if (form.checkValidity()) {
      const formData = new FormData(form);
      console.log('Form data:', Object.fromEntries(formData));
    }
  });
</script>

Validation

The component supports HTML5 validation:

• required - Field is required
• type - Validates email, url, etc.
• pattern - Custom regex validation
• minlength / maxlength - Length validation
• Custom validation via setCustomValidity()

const input = document.querySelector('poc-input');

// Set custom validation
await input.setCustomValidity('This username is already taken');

// Check validity
const isValid = await input.checkValidity();

// Get validity state
const validity = await input.getValidity();

Styling

The component uses Shadow DOM with default styles. It supports:

• Focus states
• Error states
• Disabled states
• Readonly states
• Dark mode (automatic)

Accessibility

• Proper ARIA attributes (aria-invalid, aria-describedby)
• Keyboard navigation support
• Screen reader friendly
• Focus management

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Note: Form association requires browsers that support the ElementInternals API (Chrome 77+, Edge 79+, Safari 16.4+, Firefox 93+).

License

MIT