Real-time Input Colorization Web Component – RichInput

Preview:

Description:

RichInput is a Web Component library that enhances native form inputs with real-time colorization capabilities.

It parses the input’s value against a regular expression and applies custom CSS styles to the matching capture groups as a user types.

This provides immediate visual feedback for structured data, like separating the user and domain in an email address or formatting a phone number.

Features:

• Native Foundation: Built on top of a standard <input> element, so it inherits native behavior, accessibility, and form participation.
• CSS ::part Styling: Exposes regex capture groups as stylable ::part pseudo-elements (e.g., ::part(group-1)).
• Standard API: Implements the same properties (value, disabled, pattern) and methods (checkValidity(), focus()) as a native HTMLInputElement.

See it in action:

How to use it:

1. Install RichInput and import it into your project:

# NPM
$ npm install git+https://github.com/keithclark/richinput

import RichInputElement from '@keithclark/richinput';

<!-- OR -->
<script type="module">
import RichInputElement from './dist/richinput.js';
</script>

2. Defines <kc-richinput> as the custom element tag:

customElements.define('kc-richinput', RichInputElement);

3. Create a rich input element with a styling pattern. The regex ([^@]+)@?(.*)? creates two capture groups:

• ([^@]+): The part before the @.
• (.*)?: The part after the @.

<kc-richinput
  id="email-example"
  type="email"
  placeholder="[email protected]"
  stylepattern="([^@]+)@?(.*)?"
></kc-richinput>

4. Apply styles to the capture groups using CSS parts:

kc-richinput::part(group-1) {
  color: #5078f0;
}
kc-richinput::part(group-2) {
  color: #14f014;
}

5. The component supports all standard input attributes plus the stylepattern attribute for regex-based styling:

• autocomplete: Controls browser autocomplete behavior
• disabled: Prevents user interaction with the input
• maxlength: Sets maximum character limit
• pattern: Standard validation pattern (separate from stylepattern)
• placeholder: Displays hint text when empty
• readonly: Allows focus but prevents modification
• required: Makes the field mandatory for form submission
• stylepattern: Regular expression for visual styling (must match entire input)
• type: Supports text, email, tel, and url types
• value: Sets the input content

6. Instance properties available on the RichInputElement.

• autocomplete: A string that controls browser autofill behavior.
• disabled: A boolean that, when true, makes the input non-interactive.
• form (Read-only): Returns the parent <form> element, or null if none exists.
• list (Read-only): Returns the associated <datalist> element.
• maxLength: A number specifying the maximum number of characters allowed.
• pattern: A string containing a regex that the input’s value must match for validation.
• placeholder: A string for the placeholder text shown when the input is empty.
• readOnly: A boolean that, when true, prevents the user from modifying the value.
• required: A boolean indicating that the input must have a value for form submission.
• selectionDirection: A string ("forward", "backward", "none") indicating the direction of the text selection.
• selectionEnd: A number representing the end index of the selected text.
• selectionStart: A number representing the start index of the selected text.
• stylePattern: A string containing the regex used to apply styling to capture groups.
• type: A string specifying the input type. Can be "text", "tel", "email", or "url".
• validationMessage (Read-only): A string with the validation message if the input is invalid.
• validity (Read-only): A ValidityState object containing the input’s validation status.
• value: A string that gets or sets the current text content of the input.
• willValidate (Read-only): A boolean indicating if the input is a candidate for constraint validation.

7. Instance methods available on the RichInputElement.

• checkValidity(): Returns true if the input’s value passes its validation constraints, otherwise false.
• focus(options): Sets focus on the input element.
• reportValidity(): Checks validity and reports any failures to the user. Returns true if valid.
• select(): Selects all the text content within the input.
• setCustomValidity(message): Sets a custom validation message for the input. Pass an empty string to clear it.
• setRangeText(replacement, start, end, selectMode): Replaces a range of text in the input with a new string.
• setSelectionRange(start, end, direction): Sets the start and end positions of the text selection.

Frequently Asked Questions

Q: What happens if my regex pattern doesn’t match the input?
A: When the stylepattern doesn’t match the current input, RichInput displays the text without colorization. The component continues to function as a normal input, and validation still works through the standard pattern attribute. This graceful degradation prevents broken user experiences with complex or incomplete input.

Q: Can I style nested groups or overlapping patterns?
A: The current implementation supports sequential capture groups but doesn’t handle nested or overlapping patterns. Each capture group becomes a separate styleable part, and groups cannot overlap in the visual output. Design your patterns to create distinct, non-overlapping segments for best results.

Q: Does RichInput work with screen readers and accessibility tools?
A: RichInput maintains full accessibility compatibility by preserving the native input element for all user interactions. Screen readers and other assistive technologies interact with the actual input element, not the styled overlay. The visual enhancements don’t interfere with accessibility features.

Q: Can I use any CSS property to style the parts?
A: No. The styling capabilities are limited to what can be applied to text within the input context. You can reliably use color, background-color, text-decoration, and text-shadow. Complex layout or box-model properties won’t work.