@conectate/ct-input

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

Installation

Install via npm or pnpm:

``sh
pnpm i @conectate/ct-input


or


npm i @conectate/ct-input
`

Basic Usage

`html











`

Usage with ES Modules

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

$3

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

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

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

$3

| 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:

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

Validation

The component includes built-in validation support:

`html

`

You can also validate programmatically:

`js
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

![Herberth_thumb](https://x.com/herberthobregon)

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