searchcraft-input-form

This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data. It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.

Import

React

import { SearchcraftInputForm } from "@searchcraft/react-sdk";

Vue

import { SearchcraftInputForm } from "@searchcraft/vue-sdk";

Usage

JS

<searchcraft-input-form auto-search />

React

<SearchcraftInputForm autoSearch />

Vue

<SearchcraftInputForm autoSearch />

Properties

Property	Attribute	Description	Type	Default
autoSearch	auto-search	Whether or not to automatically submit the search term when the input changes.	boolean | undefined	true
buttonLabel	button-label	The label for the submit button.	string | undefined	undefined
buttonPlacement	button-placement	Where to place the search button.	"left" | "none" | "right" | undefined	'none'
inputLabel	input-label	The label rendered above the input.	string | undefined	undefined
placeholderBehavior	placeholder-behavior	The placeholder’s render behavior. ‘hide-on-focus’ - Hide the placeholder text immediately when the input form gains focus. ‘hide-on-text-entered’ - Only hide the placeholder when the input form has text entered into it.	"hide-on-focus" | "hide-on-text-entered" | undefined	undefined
placeholderValue	placeholder-value	The input element’s placeholder value.	string | undefined	'Enter Search'
searchcraftId	searchcraft-id	The id of the Searchcraft instance that this component should use.	string | undefined	undefined

Events

Event	Description	Type
inputBlur	When the input becomes unfocused.	CustomEvent<void>
inputFocus	When the input becomes focused.	CustomEvent<void>
inputInit	Event emitted when input initializes.	CustomEvent<void>