@litforge/text-input

A generic text input component with validation, built with Lit.

Overview

The TextInput component provides a flexible text input for various input types (text, search, url, tel, etc.) with built-in validation and error display.

Installation

npm install @litforge/text-input
# or
pnpm add @litforge/text-input
# or
yarn add @litforge/text-input

Basic Usage

<script type="module">
  import '@litforge/text-input';
</script>

<text-input
  label="Search"
  placeholder="Enter search term"
  type="search"
  value="${searchValue}"
  @text-change="${handleTextChange}"
></text-input>

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | label | string | '' | Input label | | placeholder | string | '' | Placeholder text | | value | string | '' | Input value | | type | string | 'text' | Input type (text, search, url, tel, etc.) | | error | string | undefined | Error message to display | | disabled | boolean | false | Disables the input | | required | boolean | false | Marks input as required | | helper | string | undefined | Helper text to display |

Events

text-change

Fired when the input value changes.

Detail: { value: string }

Examples

Basic Text Input

<text-input
  label="Name"
  placeholder="Enter your name"
></text-input>

Search Input

<text-input
  label="Search"
  type="search"
  placeholder="Search applications..."
  @text-change="${handleSearch}"
></text-input>

With Error

<text-input
  label="URL"
  type="url"
  value="${url}"
  error="${urlError}"
></text-input>

Required Field

<text-input
  label="Application Name"
  required
  error="${validationError}"
></text-input>

Styling

The component uses CSS variables for theming:

text-input {
  --lf-input-field-font-family: 'Inter', sans-serif;
  --lf-input-field-border-color: #e2e8f0;
  --lf-input-field-error-color: #b42318;
  --lf-input-field-accent-color: #0b6efd;
  /* ... more variables */
}

TypeScript

import { TextInput } from '@litforge/text-input';

License

Part of the LitForge component library.