Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <script lang="ts">
import { createEventDispatcher } from "svelte";
import { url as searchIcon } from "$icons/search--white";
import Button from "$lib/components/Button";
import classNames from "$lib/util/classNames";
import type { Size } from "./options";
export let size: Size = "default";
export let id: string;
export let label = "Search";
export let disabled = false;
export let inputName = "searchTerm";
let searchTerm = "";
type SearchEvent = { searchTerm: string };
const dispatch = createEventDispatcher<{
input: SearchEvent;
submit: SearchEvent;
}>();
const onInput = () => dispatch("input", { searchTerm });
const onSubmit = (e: Event) => {
e.preventDefault();
dispatch("submit", { searchTerm });
};
</script>
<form
class={classNames(
"usa-search",
{ default: "", small: "usa-search--small", big: "usa-search--big" }[size]
)}
role="search"
on:submit={onSubmit}
>
<label class="usa-sr-only" for={`${id}--input`}>{label}</label>
<input
class="usa-input"
name={inputName}
id={`${id}--input`}
type="search"
bind:value={searchTerm}
on:input={onInput}
{disabled}
aria-disabled={disabled}
/>
<Button type="submit" class="usa-search__submit" {disabled}>
{#if size !== "small"}<span class="usa-search__submit-text">{label}</span>{/if}<img
src={searchIcon}
class="usa-search__submit-icon"
alt={label}
/>
</Button>
</form>
|