== Component design
=== Background/Goal
The SearchInput component needs to be designed and specified before its implementation as one of the building blocks of the Codex TypeaheadSearch component.
{F35021385}
| [[ https://www.figma.com/file/bR5j7Y21Iujf6fRXjAdfaJ/Search-Input---T300565?node-id=201%3A9283 | This Figma frame]] contains the design specifications for this component. |
==== User stories
As a designer and developer, I need to be able to reuse a system-compliant SearchInput component, in order to provide users with an input they can use to submit a search query.
==== Considerations
The SearchInput component has two variants:
- A simple version that only presents a single input type search
- A version that also includes a 'Search' button (Normal neutral, with text or IconOnly) beside the input
===== Development considerations
The SearchInput component is composed either by a single search input (i.e. an Input with `type=search`) or a search input + Normal Neutral Button.
=== Acceptance criteria (or Done)
[-] All the interactive states and behavior of the SearchInput are documented.
[] All the visual properties of the SearchInput are fully specified using design system tokens
[-] Keyboard navigation support is defined
---
== Component implementation
=== Background
The existing version of TypeaheadSearch within Codex has a UI similar to that of SearchInput, and should use the SearchInput component once it exists.
=== Acceptance criteria
- [x] CdxSearchInput can be used within TypeaheadSearch, while providing a reusable interface for other search implementations
- [x] CdxSearchInput is properly documented on the Codex docs site
- [] CdxSearchInput follows the design spec
---
=== Notes:
- Responsiveness is out of the scope of this task and captured by this separate ticket: T302881