# Search Bar
URL: /lynx/components/search-bar
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/lynx/components/search-bar.mdx

화면 상단에서 검색어를 입력하는 App Bar입니다. Search Input을 Back·닫기 버튼과 함께 배치합니다.

Lynx Engine 최소 버전: 3.6
사용 XElement: <input>

사용 가능 버전: @seed-design/lynx-react@1.1.0, @seed-design/lynx-css@1.1.0

## Preview

```tsx
import "./styles";

import { useState } from "@lynx-js/react";
import { SearchBar } from "@/components/ui/search-bar";

export default function Example() {
  const [value, setValue] = useState("");
  const [submittedValue, setSubmittedValue] = useState<string | null>(null);
  const [lastAction, setLastAction] = useState("없음");

  function handleSubmit(nextValue: string) {
    "background only";
    setSubmittedValue(nextValue);
  }

  function handleBack() {
    "background only";
    setLastAction("뒤로");
  }

  function handleClose() {
    "background only";
    setLastAction("닫기");
  }

  function handleContentTap() {
    "background only";
    // The screen dismisses the keyboard when its content is tapped; the search input does not.
    lynx
      .createSelectorQuery()
      .select("#search-bar-preview-input")
      .invoke({ method: "blur" })
      .exec();
  }

  return (
    <view className="search-bar-preview">
      <SearchBar
        value={value}
        onValueChange={setValue}
        onSubmit={handleSubmit}
        placeholder="검색어를 입력해주세요"
        onBack={handleBack}
        onClose={handleClose}
        inputProps={{ id: "search-bar-preview-input" }}
      />
      <view className="search-bar-preview__content" bindtap={handleContentTap}>
        <text className="search-bar-preview__status">
          {submittedValue === null ? "검색어를 입력하고 검색해주세요" : `"${submittedValue}" 검색`}
        </text>
        <text className="search-bar-preview__status">마지막 액션: {lastAction}</text>
      </view>
    </view>
  );
}
```

Search Bar는 [App Bar](/lynx/components/app-bar) 안에 [Search Input](/lynx/components/search-input) snippet을 배치한 컴포넌트입니다. 검색 입력은 `AppBarSlot`에 두어 좌우 버튼 사이를 채웁니다.

## Installation

- npm: npx @seed-design/cli@latest add ui:search-bar
- pnpm: pnpm dlx @seed-design/cli@latest add ui:search-bar
- yarn: yarn dlx @seed-design/cli@latest add ui:search-bar
- bun: bun x @seed-design/cli@latest add ui:search-bar

CLI로 설치하면 Search Bar가 사용하는 `ui:app-bar`와 `ui:search-input`도 함께 설치됩니다.

## Usage

```tsx
import { SearchBar } from "@/components/ui/search-bar";
```

```tsx
<SearchBar
  value={value}
  onValueChange={setValue}
  onSubmit={handleSubmit}
  placeholder="검색어를 입력해주세요"
  onClose={handleClose}
/>
```

## Props

`onBack`, `onClose`, `closeLabel`, `appBarProps`를 제외한 prop은 [Search Input](/lynx/components/search-input#props) snippet으로 전달됩니다.

## Examples

### Back Button

`onBack`을 넘기면 Back 버튼을 표시하고, 버튼을 탭하면 `onBack`을 호출합니다. 검색 플로우에서 이전 화면으로 돌아가는 동작을 제공할 때만 사용하세요.

닫기 버튼은 항상 표시되며, `onClose`로 동작을 지정합니다. 레이블은 `closeLabel`로 바꿀 수 있습니다.

### Keyboard

키보드의 검색 키를 누르면 `onSubmit`이 호출되고 입력의 focus가 해제되어 키보드가 내려갑니다. 콘텐츠를 누르거나 스크롤할 때 키보드를 내리는 동작은 화면에서 처리합니다. 위 예제는 콘텐츠를 탭하면 입력의 `blur` UI method를 호출합니다.

<Callout>
  이 예제는 네이티브 키보드 동작을 사용합니다. QR 코드 패널에서 Lynx Explorer로 실행한 뒤 입력 영역을 탭해 확인해 주세요.
</Callout>

## 웹 버전과의 차이

- React의 Search Bar는 Stackflow `AppScreen`의 App Bar를 쓰고 `showBackButton`으로 `pop()`을 호출하는 Back 버튼을 표시합니다. Lynx에는 내비게이션 스택이 없으므로 `onBack`으로 Back 버튼의 표시와 동작을 함께 정합니다.
- App Bar의 `theme` 등은 `appBarProps`로 전달합니다.