Search Input

Search input component

Marketing BlockNavigation

Overview

A compound search input with a search icon, clear button, and optional selectable options. Type to filter options, navigate with arrow keys, and select with Enter. Fully keyboard-accessible with combobox ARIA roles.

Usage

import { SearchInput } from "@leanicon/web-builder-library";

Default

Empty search input with placeholder text and search icon.

Custom placeholder

With default value

Set defaultValue to pre-fill the input. The clear button appears automatically.

With options

Add SearchInput.Option children to create a filterable dropdown. Options are filtered as the user types, navigable with arrow keys, and selectable with Enter.

With option links

Options can include href to navigate on selection.

Many options (scrollable)

The dropdown scrolls when there are many options (max-h-64).

Dark mode

With default value — dark mode

With options — dark mode

Sub-components

Sub-component	Props	Description
`SearchInput.Option`	`value?`, `href?`, `onSelect?`, `children`	A selectable option in the dropdown

Props

SearchInput

Prop	Type	Default	Description
`defaultValue`	`string`	`""`	Initial input value
`placeholder`	`string`	`"Search..."`	Input placeholder text
`children`	`React.ReactNode?`	—	`SearchInput.Option` elements
`colorScheme`	`"light" \| "dark"`	—	Force light or dark mode
`className`	`string`	—	Additional CSS classes on root

SearchInput.Option

Prop	Type	Description
`value`	`string?`	Filterable value — also set as input on selection
`href`	`string?`	Optional link URL — wraps content in an anchor
`onSelect`	`() => void`	Optional callback when option is selected
`children`	`React.ReactNode`	Option display content

Keyboard interaction

Key	Action
`ArrowDown`	Move highlight to next option
`ArrowUp`	Move highlight to previous option
`Enter`	Select highlighted option
`Escape`	Close dropdown

Notes

Options are filtered by matching the value prop (or string children) against the current query (case-insensitive).
The input uses role="combobox" with aria-expanded, aria-autocomplete="list", and aria-activedescendant for screen reader support.
The dropdown uses role="listbox" with role="option" on each item.
Dark mode: pass colorScheme="dark" or place inside a .dark ancestor.

Props

Name	Type	Default	Required
`defaultValue`	`string`	—	No
`placeholder`	`string`	`Search...`	No
`colorScheme`	`enum`	—	No
`className`	`string`	—	No
`value`	`string`	—	No
`href`	`string`	—	No
`onSelect`	`(() => void)`	—	No