SearchInput

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

Import

import '@kittl/ui';

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

Usage

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

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

/** Basic SearchInput usage, rendered live on the docs site. */
export const SearchInputUsage = () => (
  <SearchInput
    placeholder="Search templates..."
    onChange={(e) => console.log('changed:', e.detail.value)}
    onSearch={(e) => console.log('search:', e.detail.value)}
  />
);

Listen for events on the element:

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);
});

Props

Property	Attribute	Type	Default	Description
size	size	's' | 'm' | 'l'	'm'	Input size
placeholder	placeholder	string	—	Placeholder text
label	label	string	—	Label text
value	value	string	''	Current value
name	name	string	—	Form field name
disabled	disabled	boolean	—	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