A search form component with text input, clear button, and search action. `ed-search-form` renders a labeled search...

A search form component with text input, clear button, and search action. `ed-search-form` renders a labeled search input field with integrated search button and conditional clear button. The clear button appears when the input has focus and contains text. The component manages input state and provides keyboard/click event handling for search operations. Use this component for: - Site-wide or page-specific search functionality - Search inputs with quick clear/reset capability - Typeahead or autocomplete-ready search fields - Accessible search controls with proper labeling The component fires input events on the native input element and manages visibility of the clear button based on interaction state. It does not handle actual search logic—that should be implemented in the parent application.

<ed-search-form></ed-search-form>

Properties

Name Type Default Description
fieldId String string A search form component with text input, clear button, and search action. `ed-search-form` renders a labeled search input field with integrated search button and conditional clear button. The clear button appears when the input has focus and contains text. The component manages input state and provides keyboard/click event handling for search operations. Use this component for: - Site-wide or page-specific search functionality - Search inputs with quick clear/reset capability - Typeahead or autocomplete-ready search fields - Accessible search controls with proper labeling The component fires input events on the native input element and manages visibility of the clear button based on interaction state. It does not handle actual search logic—that should be implemented in the parent application. / export class EdSearchForm extends EdElement { static get styles() { return unsafeCSS(styles); } /** The unique id of the field
label String string = 'Label' Label of the form field
inverted Boolean boolean Inverted variation for dark backgrounds
hideLabel Boolean boolean Visually hide the label from the UI
variant String 'display' Style variant <ed-text-passage size="sm"> <ul> <li>**display** Enhanced styling for prominent hero search forms or page-level search</li> </ul> </ed-text-passage>
value String string = '' Input value
trimItems Boolean boolean = false Trim Items value TODO: Revisit this
isActive Boolean boolean = false Input value TODO: Revisit this
isEmpty Boolean boolean = false Empty state TODO: Revisit this
placeholder String string = 'Find a symbol' Placeholder text
clearButtonText String string = 'Clear' Clear button text 1) Text for the clear button within the input
isApple Boolean boolean = true isApple TODO: Revisit this

Slots

Name Description
- Optional content to display in the search area (default content area)

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/search-form/search-form.ts