Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
Components

SearchInput

Search inputs are useful when searching through content

FigmaGitHub

Examples

A basic search input

<SearchInput label="Search" />

A controlled search input

() => {
  const [query, setQuery] = React.useState("");
  return (
    <SearchInput 
      label="Search" 
      value={query}
      onChange={e => setQuery(e.target.value)}
    />
  );
}

A search input with a reset button

() => {
  const [query, setQuery] = React.useState("");
  return (
    <SearchInput 
      label="Search" 
      value={query}
      onChange={e => setQuery(e.target.value)}
      onReset={() => setQuery("")}
    />
  );
}

Different variants

<Stack gap={3}>
  <SearchInput label="Base" />
  <SearchInput label="Floating" variant="floating" />
</Stack>

Guidelines

A SearchInput is used for searching for content.

You may use functions like "reset" and others.

Code

<SearchInput />

import { SearchInput } from "@vygruppen/spor-react";

Input for searching or filtering content

Props

Name
Type
Required?
Description
valuestringThe value, if controlled
onChangefunctionCallback for when the value changes
onResetfunctionCallback for when the input is reset. When this is specified, a reset button appears to the right of the input field
labelstringThe label of the input field. Default "Search" (localized)
variant"core" | "floating"Defaults to core.