Search

value

onChange

e => setValue(e.target.value)

e => setValue(e.target.value)

debouncedOnChange

e => console.log(e.target.value)

e => console.log(e.target.value)

className

style

disabled

import * as React from "react";
import { Search } from "spaceweb/search";

export default () => {
  const [value, setValue] = React.useState("Hello");
  return (
    <Search
      value={value}
      onChange={e => setValue(e.target.value)}
      debouncedOnChange={e => console.log(e.target.value)}
      style="w-3/4"
      variant="default"
      placeholder="Search"
      debounceInterval={200}
    />
  );
}

import * as React from "react";
import { Search } from "spaceweb/search";

export default () => {
  const [value, setValue] = React.useState("Hello");
  return (
    <Search
      value={value}
      onChange={e => setValue(e.target.value)}
      debouncedOnChange={e => console.log(e.target.value)}
      style="w-3/4"
      variant="default"
      placeholder="Search"
      debounceInterval={200}
    />
  );
}

Search enables a person to search text information.

When to use

When a person needs to search information in the application.

Examples

Stateful Search

States and Variants

Sizes

Debounce handler

After overrides

API

Search props

Name	Type	Default	Description
aria-describedby	string		Sets aria-describedby attribute.
aria-label	string		Sets aria-label attribute.
aria-labelledby	string		Sets aria-labelledby attribute.
autoComplete	string		Determines if browser should provide value suggestions.
autoFocus	boolean	false	If true the input will be focused on the first mount.
className	string		className to modify style of Search container
clearable	boolean	false	If true, adds a clear value icon button to the end of the input container.
debounceInterval	number		debouncedOnChange function will be called after onChange stops being called for this duration in milliseconds.
debouncedOnChange	function		Debounced handler of onChange. Specify interval with `debounceInterval` prop.
disabled	boolean	false	Renders component in disabled state.
id	string		Id attribute value to be added to the input element and as a label's for attribute value.
inputMode	string		A hint as to the type of data that might be entered by the user while editing the element or its contents.
inputRef	ref		A ref to access an input element.
name	string		Name attribute.
onBlur	function		Called the onBlur event triggers.
onChange	function		Called when search value is changed.
onFocus	function		Called the onFocus event triggers.
onKeyDown	function		Called the onKeyDown event triggers.
onKeyPress	function		Called the onKeyPress event triggers.
onKeyUp	function		Called the onKeyUp event triggers.
overrides	custom		Lets you customize all aspects of the component.
placeholder	string		Search Input's placeholder.
size	'xxs' \| 'xs' \| 'sm' \| 'md'		Input's size. SPACIOUS \| COMFORTABLE -> md, COMPACT -> xxxs, DEFAULT -> md
style	string		className to modify style of Search container
value	string		Search value attribute.
variant	'default' \| 'light'		Variant of SearchInput

You can check the implementation of the component for more details.

Search exports

You can import this module like so:

import {Search} from 'spaceweb/search'

It exports the following components or utility functions:

Search
StatefulSearch

🏁
Getting started

📖
Guides

📦
Packages

🖇
Components

📊
Charts