@litforge/select-input

A select dropdown component with single and multiple selection support, built with Lit.

Overview

The SelectInput component provides a flexible dropdown/select input with support for single or multiple selection, validation, and error display.

Installation

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

Basic Usage

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

<select-input
  label="Category"
  placeholder="Select a category"
  .options=${options}
  .value=${selectedValue}
  @select-change=${handleChange}
></select-input>

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | label | string | '' | Input label | | placeholder | string | '' | Placeholder text (single select only) | | value | string \| string[] | '' | Selected value(s) | | options | SelectOption[] | [] | Array of select options | | multiple | boolean | false | Enable multiple selection | | 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

select-change

Fired when the selection changes.

Detail: { value: string | string[] }

Types

SelectOption

interface SelectOption {
  value: string;
  label: string;
  disabled?: boolean;
}

Examples

Single Select

<select-input
  label="Category"
  placeholder="Select category"
  .options=${[
    { value: 'productivity', label: 'Productivity' },
    { value: 'communication', label: 'Communication' }
  ]}
  .value=${selectedCategory}
  @select-change=${handleCategoryChange}
></select-input>

Multiple Select

<select-input
  label="Tags"
  multiple
  .options=${tagOptions}
  .value=${selectedTags}
  @select-change=${handleTagsChange}
></select-input>

With Error

<select-input
  label="Status"
  .options=${statusOptions}
  .value=${status}
  error=${statusError}
></select-input>

Styling

The component uses CSS variables for theming:

select-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 { SelectInput, SelectOption } from '@litforge/select-input';

License

Part of the LitForge component library.