@conectate/ct-input

A collection of customizable input components including text input, textarea, and autocomplete functionality.

Installation

Install via npm or pnpm:

pnpm i @conectate/ct-input
# or
npm i @conectate/ct-input

Basic Usage

<!-- Basic text input -->
<ct-input label="Username"></ct-input>

<!-- Password input -->
<ct-input type="password" label="Password"></ct-input>

<!-- Input with error message -->
<ct-input label="Email" type="email" errorMessage="Please enter a valid email"></ct-input>

<!-- Textarea with auto-grow -->
<ct-textarea-autogrow label="Message"></ct-textarea-autogrow>

Usage with ES Modules

If you are using frameworks like Lit, React, or Vue, import the component:

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";

Example with LitElement (TypeScript)

import { LitElement, customElement, html } from "lit";
import "@conectate/ct-input";

@customElement("my-form")
class MyForm extends LitElement {
	render() {
		return html`
			<ct-input
				label="Username"
				@input=${this.handleInput}
				required
			></ct-input>
		`;
	}

	handleInput(e) {
		console.log("Input value:", e.target.value);
	}
}

Components

This package includes multiple input components:

• ct-input: Standard text input component
• ct-textarea: Multiline text input
• ct-textarea-autogrow: Textarea that grows with content
• ct-input-autocomplete: Input with autocomplete suggestions
• ct-input-container: Container component for inputs
• ct-input-phone: Phone number input
• ct-autocomplete-suggestions: Suggestions dropdown for autocomplete

Properties

ct-input

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

Slots

• 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

CSS Variables

You can customize the components using the following CSS variables:

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 */
}

Validation

The component includes built-in validation support:

<ct-input label="Email" type="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" errorMessage="Please enter a valid email address"></ct-input>

You can also validate programmatically:

const input = document.querySelector('ct-input');
const isValid = input.validate();

Accessibility (a11y)

The component supports proper focus states, keyboard navigation, and aria attributes for accessibility.

Follow Me

https://x.com/herberthobregon

Contributing

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

License

See LICENSE