<script>
  import Query16 from "carbon-icons-svelte/lib/Query16";
  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 in the search input element.

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

### Expandable variant

<Search expandable on:expand on:collapse />

### Light variant

<Search light />

### Large size

<Search size="lg" />

### Small size

<Search size="sm" />

### Disabled state

<Search disabled />

### Custom search icon

<Search icon={Query16} />

### Skeleton

<Search skeleton />

### Skeleton (large)

<Search size="lg" skeleton />

### Skeleton (small)

<Search size="sm" skeleton />