Hewn
Components

Components

SearchField

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

newfree

Install

@hewnui/ui · hewnui

Terminal
npm install @hewnui/ui
Terminal
pnpm add @hewnui/ui
Terminal
yarn add @hewnui/ui
Terminal
bun add @hewnui/ui
Terminal
npx hewnui@latest add search-field

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

Press Escape to clear.

Usage

TSX
import { SearchField } from "@hewnui/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

API reference

Props for SearchField from @hewnui/ui/search-field. Generated from component types — not hand-written.

Prop

Type

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