@olundot/ui · Inputs

SearchField

검색어 입력, 검색 아이콘, 선택적 지우기 버튼을 함께 제공하는 검색 입력 필드입니다.

필수 props
SearchField는 일반 input props에 검색 아이콘과 지우기 동작을 더합니다.
size
높이, 아이콘 크기, 글자 크기, 안쪽 여백을 함께 바꾸는 density prop입니다. 폭은 바꾸지 않습니다. field-control scale은 sm=30px, md=32px, lg=36px입니다.
Button 조합
같은 높이로 맞출 때는 SearchField sm/md/lg를 Button sm/md/lg와 조합합니다.
폭
기본은 w-full입니다. 도구막대처럼 짧은 검색은 className으로 w-[240px] max-w-full 같은 폭 제약을 둡니다.
clearable
값이 있을 때 지우기 버튼을 표시하고 독립 포커스 대상으로 둡니다.

기본

보이는 Label과 id 연결
코드 보기tsx
import { Label, SearchField } from "@olundot/ui";

export function MemberSearchField() {
  return (
    <div className="grid gap-2">
      <Label htmlFor="member-search">구성원 검색</Label>
      <SearchField surface="canvas"
        id="member-search"
        name="memberSearch"
        placeholder="이름 또는 이메일"
        autoComplete="off"
      />
    </div>
  );
}

FormField 연결

설명 텍스트와 검색 입력 연결
코드 보기tsx
import { FormField, SearchField } from "@olundot/ui";

export function CourseSearchField() {
  return (
    <FormField
      id="course-search"
      label="강좌 검색"
      description="강좌명, 담당자, 코드를 입력합니다."
    >
      {({ controlProps }) => (
        <SearchField surface="canvas"
          {...controlProps}
          name="courseSearch"
          placeholder="예: 해부학"
          autoComplete="off"
        />
      )}
    </FormField>
  );
}

크기

field-control scale: sm 30px · md 32px · lg 36px
코드 보기tsx
import { SearchField } from "@olundot/ui";

export function SearchFieldSizes() {
  return (
    <div style={{ display: "grid", gap: "12px", width: "280px", maxWidth: "100%" }}>
      <SearchField surface="canvas" aria-label="작은 검색" size="sm" placeholder="sm" />
      <SearchField surface="canvas" aria-label="기본 검색" size="md" placeholder="md" />
      <SearchField surface="canvas" aria-label="큰 검색" size="lg" placeholder="lg" />
    </div>
  );
}

도구막대

aria-label, sm 밀도, 명시적 폭 제약
코드 보기tsx
import { useState } from "react";
import { SearchField } from "@olundot/ui";

export function CompactSearchField() {
  const [query, setQuery] = useState("미완료");
  return (
    <SearchField surface="canvas"
      aria-label="목록 검색"
      name="listSearch"
      size="sm"
      className="w-[240px] max-w-full"
      value={query}
      onChange={(event) => setQuery(event.currentTarget.value)}
      onClear={() => setQuery("")}
      placeholder="검색"
    />
  );
}