SearchInput

SearchInput defines how EnterUI handles a search input with icon and optional clear action, including default structure, accessible states, and token-driven styling.

#Default usage

<SearchInput aria-label="Search components" placeholder="Search components..." />

#Import

import { SearchInput } from "@froggdesign/enter-ui-react";

#Patterns

const [query, setQuery] = useState("Button");

<SearchInput
  aria-label="Search components"
  value={query}
  onChange={(event) => setQuery(event.currentTarget.value)}
  onClear={() => setQuery("")}
  clearLabel="Clear component search"
/>

The shared component owns the search and clear SVG icons, their spacing, and responsive alignment. Use its props without custom icon or control styles.

#Accessibility

SearchInput renders a native search input. Provide a visible label or aria-label. Decorative icons are hidden from assistive technology. The clear button appears when onClear and a nonempty controlled value exist, unless the input is read-only. Enter or Space activates the focused clear button, runs onClear, and returns focus to the search input. The consumer clears its value in the callback. A disabled input also disables its clear action.

The field fits its container, with a 400px preferred maximum width. Icons stay vertically centered in normal and compact toolbar contexts; text has reserved space for both icons. Mobile text remains readable without focus zoom.

#API

• Extends input props except type.
• onClear enables the clear button.
• clearLabel customizes the clear button accessible label.
• disabled disables both controls; readOnly hides the clear action.
• Forwarded refs point to the native search input.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.