HTML input made with Web Components
npm install @conectate/ct-inputA collection of customizable input components including text input, textarea, and autocomplete functionality.
Install via npm or pnpm:
``sh`
pnpm i @conectate/ct-inputor
npm i @conectate/ct-input
`html
`
If you are using frameworks like Lit, React, or Vue, import the component:
`ts`
import "@conectate/ct-input";
import "@conectate/ct-input/ct-textarea.js";
import "@conectate/ct-input/ct-textarea-autogrow.js";
import "@conectate/ct-input/ct-input-autocomplete.js";
`ts
import { LitElement, customElement, html } from "lit";
import "@conectate/ct-input";
@customElement("my-form")
class MyForm extends LitElement {
render() {
return html
@input=${this.handleInput}
required
>
;
}
handleInput(e) {
console.log("Input value:", e.target.value);
}
}
`
This package includes multiple input components:
- ct-input: Standard text input componentct-textarea
- : Multiline text inputct-textarea-autogrow
- : Textarea that grows with contentct-input-autocomplete
- : Input with autocomplete suggestionsct-input-container
- : Container component for inputsct-input-phone
- : Phone number inputct-autocomplete-suggestions
- : Suggestions dropdown for autocomplete
| Property | Type | Default | Description |
| -------------- | ------------------ | ------------------------- | --------------------------------------- |
| type | CtInputType | "text" | Input type (text, password, email, etc) |value
| | string | "" | Input value |label
| | string | "" | Label text |placeholder
| | string | "" | Placeholder text |errorMessage
| | string | "" | Error message to display |disabled
| | boolean | false | Disables the input |required
| | boolean | false | Makes the input required |pattern
| | string \| RegExp | "" | Validation pattern |charCounter
| | boolean | false | Show character counter |maxlength
| | number | Number.MAX_SAFE_INTEGER | Maximum input length |invalid
| | boolean | false | Whether the input is invalid |
- Default slot: Content inside the input (rarely used)
- prefix: Content placed at the start of the input
- suffix: Content placed at the end of the input
You can customize the components using the following CSS variables:
`css`
ct-input {
--color-primary: #2cb5e8; / Primary color for focus /
--color-error: #ed4f32; / Error color /
--border-radius: 16px; / Border radius of the input /
--ct-input-color: inherit; / Input text color /
--ct-input-placeholder-color: rgba(0, 0, 0, 0.38); / Placeholder color /
--ct-input-background: transparent; / Input background /
--ct-input-height: 56px; / Input height /
--ct-input-padding: 0 12px; / Input padding /
--ct-input-font-size: 16px; / Input font size /
--ct-label-font-size: 12px; / Label font size /
}
The component includes built-in validation support:
`html`
You can also validate programmatically:
`js`
const input = document.querySelector('ct-input');
const isValid = input.validate();
The component supports proper focus states, keyboard navigation, and aria attributes for accessibility.

1. Fork the repo
2. Create a new branch: git checkout -b feature-branchgit commit -m 'Add new feature'
3. Commit your changes: git push origin feature-branch`
4. Push to your branch:
5. Open a pull request!
See LICENSE