Autocomplete

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

검색과 태그 입력에 제안을 넣되 선택을 요구하지 마세요. 입력한 텍스트는 일치하는 제안이 없어도 유효합니다. Root.value는 선택된 ID가 아닌 입력 문자열입니다.

사용자가 등록된 리소스를 골라야 하면 Combobox를 쓰세요. 제안 밖의 텍스트를 오류로 취급하지 마세요. 입력한 대로 받아들이세요. 선택 직후 알림 없이 폼을 제출하지 마세요. 알리거나 submitOnItemClick을 끄세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Root → Field(label/description/error) + InputGroup(Input/Clear/Trigger) + Content(Empty/Status + List/Item)

키보드와 접근성

입력하면 제안이 좁아집니다. 화살표 키와 Enter는 텍스트를 완성합니다. Escape나 Tab은 팝업을 닫습니다. 기본적으로 항목 선택은 폼을 제출하지 않습니다. Base UI는 문자열이 아닌 객체 제안과 그룹 항목의 타입을 보존합니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Autocomplete, Field } from '@surflane/ui'

<Field.Root name='query'>
  <Field.Label>Pipeline search</Field.Label>
  <Autocomplete.Root name='query' items={suggestions}>
    <Autocomplete.InputGroup>
      <Autocomplete.Input placeholder='Search scenarios…' />
      <Autocomplete.Clear />
      <Autocomplete.Trigger />
    </Autocomplete.InputGroup>
    <Autocomplete.Content>
      <Autocomplete.Empty>
        No suggestions. Free text is accepted.
      </Autocomplete.Empty>
      <Autocomplete.List>
        {(item: string) => (
          <Autocomplete.Item key={item} value={item}>
            {item}
          </Autocomplete.Item>
        )}
      </Autocomplete.List>
    </Autocomplete.Content>
  </Autocomplete.Root>
  <Field.Error />
</Field.Root>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰