Component

SearchBar

검색 값·Enter 확정·초기화 동작을 controlled input 하나로 통일합니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

Code

import { useState } from 'react'

import { CollapsibleSearch, SearchBar } from '@amineslab/ui'

function SearchControlsExample({ value: initialValue = '', placeholder = '구성원 검색', clearable = true, collapsed = false, triggerLabel = '검색 열기', } = {}) {
    const [value, setValue] = useState(initialValue);
    return collapsed ? (<CollapsibleSearch value={value} onValueChange={setValue} placeholder={placeholder} clearable={clearable} triggerLabel={triggerLabel}/>) : (<SearchBar value={value} onValueChange={setValue} placeholder={placeholder} clearable={clearable} className="w-full max-w-sm"/>);
}

export default function ExamplePreview() {
  return (<SearchControlsExample key={""} {...({"value":"","placeholder":"구성원 검색","clearable":true} as const)}/>)
}

Props

@amineslab/ui에서 SearchBar를 가져옵니다.

import { SearchBar } from '@amineslab/ui'

`SearchBar`

Input의 검색 전용 조합입니다.

Name	Type	Default	Description
`value / onValueChange*`	`string / (value: string) => void`	-	controlled 검색값입니다.
`onSearch`	`(value: string) => void`	-	Enter 또는 초기화에서 실행합니다.
`clearable`	`boolean`	`true`	검색어 지우기 버튼을 표시합니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

초기화

import { SearchBar } from '@amineslab/ui'

export default function ExamplePreview() {
  return (<SearchBar value="민" onValueChange={() => undefined}/>)
}

사용 기준

권장하는 사용

검색어의 즉시 입력은 onValueChange, 검색 실행은 onSearch에 연결합니다.
clearable은 입력을 비우고 같은 검색 콜백을 빈 값으로 한 번 호출합니다.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

Enter: 현재 값을 검색합니다.
Escape: 브라우저 기본 입력 동작을 따릅니다.