<script>
  import Query from "carbon-icons-svelte/lib/Query.svelte";
  import { Search } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

## Default

The `Search` component size is extra-large by default. There are [large](#large-size) and [small](#small-size) size variants.

<Search />

## Default value

<Search placeholder="Search catalog..." value="Cloud functions" />

## Reactive example

<FileSource src="/framed/Search/SearchReactive" />

## on:clear

The "clear" event is dispatched when clicking the "X" button or when pressing the "Escape" key.

<Search value="Cloud functions" on:clear={() => console.log('clear')}/>

## Expandable variant

Set `expandable` to `true` to use the expandable variant.

<FileSource src="/framed/Search/SearchExpandableReactive" />

## Light variant

<Search light />

## Large size

<Search size="lg" />

## Small size

<Search size="sm" />

## Disabled state

<Search disabled />

## Custom search icon

<Search icon={Query} />

## Skeleton

<Search skeleton />

## Skeleton (large)

<Search size="lg" skeleton />

## Skeleton (small)

<Search size="sm" skeleton />