Searchサーチ

検索用途に特化した入力コンポーネントです。検索キーワードを入力した際に候補をサジェストする機能も持ちます。

更新 2024/11/1

サイズ

SmallとMediumの2種類があります。

Small
Medium

import { Search } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function SizeSample() {
  return (
    <Dl>
      <Dt>Small</Dt>
      <Dd>
        <Search
          items={["React", "Vue", "Angular", "Svelte", "Ember"]}
          size="small"
        />
      </Dd>

      <Dt>Medium</Dt>
      <Dd>
        <Search
          items={["React", "Vue", "Angular", "Svelte", "Ember"]}
          size="medium"
        />
      </Dd>
    </Dl>
  );
}

状態

3種類の状態があります。非活性とする際はdisabled propsを使用してください。

Enabled
Filled
Disabled

import { Search } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function StateSample() {
  return (
    <Dl>
      <Dt>Enabled</Dt>
      <Dd>
        <Search items={["React", "Vue", "Angular", "Svelte", "Ember"]} />
      </Dd>

      <Dt>Filled</Dt>
      <Dd>
        <Search
          items={["React", "Vue", "Angular", "Svelte", "Ember"]}
          value={["React"]}
        />
      </Dd>

      <Dt>Disabled</Dt>
      <Dd>
        <Search
          items={["React", "Vue", "Angular", "Svelte", "Ember"]}
          disabled
        />
      </Dd>
    </Dl>
  );
}