SearchResultGroup and SearchResultItem
The rows and sections of any results list, inside GlobalSearch or a ListBox of their own, such as a full results page. An item with href is a link.
- SearchResultGroup
- SearchResultItem
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, SearchResultGroup and SearchResultItem
Old form (archived) Archived pages cannot be opened
Dark theme, SearchResultGroup and SearchResultItem
Old form (archived) Archived pages cannot be opened
High contrast theme, SearchResultGroup and SearchResultItem
Old form (archived) Archived pages cannot be opened
UsageLink to the section Usage
import { SearchResultGroup, SearchResultItem } from '@skribly/ui/search'<ListBox aria-label="Results">
<SearchResultGroup id="issues" title="Issues" count={14} countLabel="14 issues">
<SearchResultItem id="SK-12" href="/issues/SK-12" textValue="Draft lost" title="Draft lost" description="Website" meta="SK-12" />
</SearchResultGroup>
</ListBox>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
- Each group is labelled by its title; each item is named by all of its visible text, title first, so speech input can say what it sees.
- Rows stay well above the 24px target size, also in compact density.
- Focused and hovered rows change background, and under forced colours the focused row gets a Highlight outline.
- Long titles truncate on one line while keeping their full name.
This demo runs through axe in all three themes on every test run. See what the tests check.