Form

Input Search

Search input with a pre-configured search icon, clear button, and searchTerm v-model.

Overview

InputSearch is the search input atom for header search and any in-page search field. It wraps InputGroup and Input with a pre-configured search icon and clear-button logic, and exposes its live value via the searchTerm v-model channel. Pressing Enter on a non-empty value fires an @search event so consumers can run the actual search without listening for every keystroke.

For the autocomplete-driven header search molecule with suggestions, use SearchAutoSuggest.

Key Business & UX Benefits

A dedicated clear button shortens the loop between failed searches and retry, which keeps shoppers exploring instead of bouncing.
The pre-configured search icon and searchTerm v-model channel mean every header and in-page search behaves the same, training customers on one pattern.
Composing InputGroup and Input under the hood guarantees the search field inherits the form system's accessibility and theming for free.

Pro-Tip from Larry: Place search in the main nav so users can find products without digging through menus.

Usage

LInputSearch

Feature List

Pre-configured search icon and clear-button logic, so every header and in-page search uses the same affordances
`searchTerm` v-model channel exposes the live value, separating live state from the committed search action
`@search` event fires on Enter for non-empty values, so consumers run the actual search on commit instead of every keystroke
Built on `InputGroup` and `Input`, so the field inherits form-kit accessibility and theming
Pair with `SearchAutoSuggest` when the header search needs suggestion dropdowns

API Reference

Prop	Default	Type
`placeholder`		`string`
`disabled`	`false`	`boolean`
`readonly`	`false`	`boolean`
`required`	`false`	`boolean`
`invalid`	`false`	`boolean`
`id`		`string`
`name`		`string`
`modelValue`		`string`

Event	Type
`update:modelValue`	`(event: "update:modelValue", value: string): void`
`search`	`(event: "search", value: string): void`

Edit this pageorReport an issue

Input Rating

Star rating input for capturing review scores and ratings.

Input Slider

Single-thumb or multi-thumb range slider for numeric input and range filters.