Search bar

Size

Small: Use in section header alongside with other small size buttons and tabs.

Medium: Use in section header alongside with other medium size buttons and tabs.

Large: Use in hero or the main section where search function is at the center.

States

1. Show shortcut hint on default empty field.
2. otl-gray-300 colour when on hover state.
3. Filled text in txt-black-900 colour.
4. Hide shortcut hint and show “Clear” or “X” symbol on filled textfield. Click to clear filled text.
5. Show focused ring when field is on focus state. After pressed “/” to focus.
6. Set placeholder text & button to 20%.

Search result dropdown

1. Show focus ring when type cursor still in the field. Hide focus ring is not focused or cursor it not in the search field.
2. Search result hover state. bg-washed
3. Category label. 2nd item onwards have 16px padding-top.
4. Highlight search inline text. Default product brand colour and semibold font.
5. Max-height: 400px (scrollable)