SearchOptionToggle

On or off options inside a search field: match case, whole word, regular expression. Pass them to GlobalSearch through actions.

SearchOptionToggle

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, SearchOptionToggle

Match case off, whole word off, regular expression on.

Dark theme, SearchOptionToggle

Match case off, whole word off, regular expression on.

High contrast theme, SearchOptionToggle

Match case off, whole word off, regular expression on.

UsageLink to the section Usage

tsx

import { SearchOptionToggle } from '@skribly/ui/search'

tsx

<SearchOptionToggle label="Match case" shortcut="Alt C" isSelected={matchCase} onChange={setMatchCase}>
  <CaseSensitive aria-hidden="true" />
</SearchOptionToggle>

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 is a 24px toggle button named by label, with aria-pressed and aria-keyshortcuts.
Its name also appears as a tooltip on hover and keyboard focus, and Escape hides the tooltip.
An active option gains an accent border and fill, and Highlight colours under forced colours.

This demo runs through axe in all three themes on every test run. See what the tests check.