Search

Search-focused input that can suggest candidates as you type.

Last updated 11/1/2024

Size

Two sizes: Small and Medium.

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>
  );
}

States

Three states available. Use the disabled prop when non-interactive.

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>
  );
}