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

#Accessibility

SearchInput renders a native search input. Provide a visible label or aria-label. The clear button is only rendered when onClear and a value exist.

#API

• Extends input props except type.
• onClear enables the clear button.
• clearLabel customizes the clear button accessible label.

#Styling

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