@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

``bash
npm install @litforge/select-input


or

pnpm add @litforge/select-input

or

yarn add @litforge/select-input
`

Basic Usage

`html


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

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

$3

Fired when the selection changes.

Detail: { value: string | string[] }

Types

$3

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

Examples

$3

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

$3

`html
label="Tags"
multiple
.options=${tagOptions}
.value=${selectedTags}
@select-change=${handleTagsChange}
>
`

$3

`html
label="Status"
.options=${statusOptions}
.value=${status}
error=${statusError}
>
`

Styling

The component uses CSS variables for theming:

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

`typescript
import { SelectInput, SelectOption } from '@litforge/select-input';
``

License

Part of the LitForge component library.