Search Input 검색어를 입력하고 제출하는 입력 필드입니다. 화면 상단에서는 Search Bar와 함께 사용합니다.
import "./styles" ; import { SearchInput } from "@/components/ui/search-input" ; export default function Example () { return ( < view className = "search-input-preview" > < SearchInput placeholder = "검색어를 입력해주세요" /> </ view > ); } 화면 상단에서 검색하는 경우에는 Search Input을 직접 배치하지 말고 Search Bar 를 사용하세요. Search Bar는 Search Input을 App Bar에 Back·닫기 버튼과 함께 배치합니다.
npx @seed-design/cli@latest add ui:search-input pnpm dlx @seed-design/cli@latest add ui:search-input yarn dlx @seed-design/cli@latest add ui:search-input bun x @seed-design/cli@latest add ui:search-input 의존성 설치
npm install @karrotmarket/lynx-monochrome-icon @seed-design/lynx-react yarn add @karrotmarket/lynx-monochrome-icon @seed-design/lynx-react pnpm add @karrotmarket/lynx-monochrome-icon @seed-design/lynx-react bun add @karrotmarket/lynx-monochrome-icon @seed-design/lynx-react 아래 코드를 복사 후 붙여넣고 사용하세요 /** * @file ui:search-input * @requires @seed-design/lynx-react@^1.1.0 * @requires @seed-design/lynx-css@^1.1.0 * @requires @karrotmarket/lynx-monochrome-icon@>=1.20.0 <2.0.0 **/ import IconXmarkCircleFill from "@karrotmarket/lynx-monochrome-icon/IconXmarkCircleFill" ; import { forwardRef, type ComponentRef } from "@lynx-js/react" ; import { Icon, SearchInput as SeedSearchInput } from "@seed-design/lynx-react" ; export interface SearchInputProps extends Omit < SeedSearchInput . RootProps , "children" | "accessibility-label" > { placeholder ?: string ; /** * The accessible name of the input. * @default " 검색 " */ "accessibility-label" ?: string ; /** * The accessible name of the clear button. * @default " 지우기 " */ clearButtonLabel ?: string ; /** * Props for the input element, e.g. `maxlength`. */ inputProps ?: SeedSearchInput . InputProps ; } type SearchInputRef = ComponentRef < typeof SeedSearchInput.Input>; /** * @see https://seed-design.io/lynx/components/search-input */ export const SearchInput = forwardRef < SearchInputRef , SearchInputProps >( ( { placeholder, "accessibility-label" : accessibilityLabel = "검색" , clearButtonLabel = "지우기" , inputProps, ... otherProps }, ref, ) => { return ( < SeedSearchInput.Root { ... otherProps}> { /* You may implement your own i18n for the labels */ } < SeedSearchInput.Input ref = {ref} accessibility-label = {accessibilityLabel} placeholder = {placeholder} { ... inputProps} /> < SeedSearchInput.ClearButton accessibility-label = {clearButtonLabel}> < Icon icon = {< IconXmarkCircleFill />} /> </ SeedSearchInput.ClearButton > </ SeedSearchInput.Root > ); }, ); SearchInput.displayName = "SearchInput" ; /** * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages. * You can extend this snippet however you want. */ import { SearchInput } from "@/components/ui/search-input" ; < SearchInput value = {value} onValueChange = {setValue} onSubmit = {handleSubmit} placeholder = "검색어를 입력해주세요" /> placeholder?string | undefined
value?string | undefined
placeholder, accessibility-label, clearButtonLabel, inputProps를 제외한 prop은 SearchInput.Root로 전달됩니다. accessibility-label(기본값 "검색")은 입력 요소에, clearButtonLabel(기본값 "지우기")은 Clear 버튼에 지정됩니다. 입력 요소에 넘길 maxlength 등은 inputProps로 전달하세요.
Snippet이 감싸는 @seed-design/lynx-react의 SearchInput.Root입니다. 레이아웃을 직접 조합하려면 SearchInput.Root·SearchInput.Input·SearchInput.ClearButton을 함께 사용하세요.
키보드의 검색 키를 누르면 onSubmit이 현재 값과 함께 호출됩니다. Lynx <input>의 bindconfirm 이벤트를 사용합니다.
제출한 뒤에는 입력의 focus를 해제해 키보드를 내립니다. 제출 뒤에도 계속 입력하게 하려면 blurOnSubmit={false}를 사용하세요. 이때 Lynx <input>의 confirm-enter를 켜서 native 입력이 제출 뒤 스스로 focus를 해제하지 않게 합니다.
import "./styles" ; import { useState } from "@lynx-js/react" ; import { SearchInput } from "@/components/ui/search-input" ; export default function Example () { const [ value , setValue ] = useState ( "" ); const [ submittedValue , setSubmittedValue ] = useState < string | null >( null ); function handleSubmit ( nextValue : string ) { "background only" ; setSubmittedValue (nextValue); } return ( < view className = "search-input-preview" > < SearchInput value = {value} onValueChange = {setValue} onSubmit = {handleSubmit} placeholder = "검색어를 입력하고 검색 키를 눌러주세요" /> < text className = "search-input-preview__status" > {submittedValue === null ? "아직 검색하지 않았습니다." : `검색한 값: ${ submittedValue }` } </ text > </ view > ); } Clear 버튼은 값이 있을 때만 렌더링되고, 누르면 값을 비웁니다. value를 넘기지 않은 uncontrolled 상태에서도 동작하며, onValueChange가 빈 문자열과 함께 호출됩니다.
누르는 동안 Scale Feedback으로 살짝 줄어듭니다. 입력에 focus가 있었다면 지운 뒤에도 유지하고, 없었다면 새로 주지 않습니다. Clear 버튼은 ignore-focus로 탭이 입력의 focus를 가져가지 않게 합니다.
화면에 보이는 레이블이 없으므로 입력과 Clear 버튼에 레이블이 필요합니다. Snippet은 기본값 "검색"·"지우기"를 지정하며, accessibility-label·clearButtonLabel로 바꿀 수 있습니다. compound 컴포넌트를 직접 쓸 때 SearchInput.Input과 SearchInput.ClearButton에 accessibility-label이 없으면 개발 콘솔에 경고가 출력됩니다.
Clear 버튼은 accessibility-traits="button"으로 알립니다.
콘텐츠를 누르거나 스크롤할 때 키보드를 내리는 동작은 Search Input이 아닌 화면이 담당합니다. Search Bar 예제를 참고하세요.
제출은 Enter 키의 keydown 대신 Lynx <input>의 bindconfirm(키보드의 검색 키)으로 처리합니다.
SearchInput은 value·defaultValue·onValueChange·name과 제출 prop만 받습니다. disabled·readOnly·invalid·required는 지원하지 않습니다.role="search"에 대응하는 Lynx 접근성 역할이 없어 Root에는 역할을 지정하지 않습니다.