Komponents
Components

Components

SearchField

Search input with clear control and Escape-to-clear behavior.

newfree
pnpm add @komponents/uiCanonical TypeScript source · tree-shakeable subpaths

Built on React Aria SearchField. Escape clears the value; Enter can submit via onSubmit.

Press Escape to clear.

Usage

Snippet
import { SearchField } from "@komponents/ui";

<SearchField label="Find projects" placeholder="Name or owner" />

Variants

outline (default), filled, flushed, and glass.

States

  • Description helper text
  • Invalid + errorMessage
  • Disabled
  • Clear button when the field has a value

Accessibility

  • Native search semantics
  • Clear button has an accessible name
  • Escape clears; Enter submits when onSubmit is provided

NumberField

Localized number input with accessible increment and decrement steppers.

InputGroup

Text field with prefix and suffix affixes inside shared input chrome.

On this page

UsageVariantsStatesAccessibility