SearchInput

Search input with built-in search icon, clear button, and search event.

Preview

Loading preview…

Import

// Web Component
import '@kittl/ui';

// React
import { SearchInput } from '@kittl/ui-react';

Usage

Web Component

<kittl-search-input placeholder="Search templates..."></kittl-search-input>

const input = document.querySelector('kittl-search-input');
input.addEventListener('search', (e) => {
  console.log('Search for:', e.detail.value);
});
input.addEventListener('change', (e) => {
  console.log('Value changed:', e.detail.value);
});

React

<SearchInput
  placeholder="Search templates..."
  onChange={(e) => console.log('changed:', e.detail.value)}
  onSearch={(e) => console.log('search:', e.detail.value)}
/>

Props

Property	Type	Default	Description
size	's' | 'm' | 'l'	'm'	Input size
placeholder	string	—	Placeholder text
label	string	—	Label text
value	string	''	Current value
name	string	—	Form field name
disabled	boolean	false	Disable the input

Events

Event	Detail	Description
change	{ value: string }	Fired on every input change
search	{ value: string }	Fired when user presses Enter

React props: onChange, onSearch

Form Integration

SearchInput is form-associated and supports delegatesFocus.

Accessibility

• role="searchbox" set via ElementInternals
• Clear button has aria-label="Clear search"
• Keyboard: Enter fires search event and blurs input