SearchField
Text that filters or searches, with a clear button and an optional key hint. Without a visible label give it an aria-label.
- SearchField
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, SearchField
/
Dark theme, SearchField
/
High contrast theme, SearchField
/
UsageLink to the section Usage
import { SearchField } from '@skribly/ui/forms'<SearchField aria-label="Search issues" placeholder="Search issues" shortcut="/" />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- It is a searchbox: Escape clears it and Enter submits.
- The clear button has a name and shows only when there is text.
- While loading, loadingLabel is announced politely; the spinner stops when reduced motion is on.
This demo runs through axe in all three themes on every test run. See what the tests check.