ComponentsUpdated
Version 13.4.0 introduces the size prop, which accepts "sm" or "md" and defaults to "md".
Code examples
<SearchInput label="Search" />
Guidelines
Accessibility
Width
Make sure the Search Input is wide enough to display the expected user input. For example, if it is used to search for train ticket order IDs, it should be wide enough to show a complete order ID. If it is the main search on a page, it should provide enough space for users to enter a few words without the text being truncated.
Landmark role
The Search Input uses the search input type but does not automatically have the search role. The search role is a landmark role and should only be used when the search functionality represents a major section of the page.
Use the search role sparingly, as having too many landmark regions can create unnecessary noise for users of assistive technologies, such as screen readers.
Code
<SearchInput />
import { SearchInput } from "@vygruppen/spor-react";
Input for searching or filtering content
Props
Name | Type | Required? | Description |
|---|---|---|---|
value | string | The value, if controlled | |
onChange | function | Callback for when the value changes | |
onReset | function | Callback for when the input is reset. When this is specified, a reset button appears to the right of the input field | |
label | string | The label of the input field. Default "Search" (localized) | |
variant | "core" | "floating" | Defaults to core. | |
size | "sm" | "md" | Defaults to "md" |