InputSearch

Component

Storybook

Figma Demo

Guidelines

Variations

Search inputs are offered in three sizes:

• sm (32px)
• base (40px)
• lg (48px)

Search inputs require a leading icon of a magnifying glass to signify the purpose of the input. When a search term is entered, an xs size tertiary button appears to allow users to clear the field.

Search inputs allow for a label, placeholder text, and optional helper text.

Search inputs may be used in conjunction with a distinct “Search” button to produce results, or they may automatically trigger a search once a set number of characters are entered.

Usage

• The base size field should be used in the majority of cases.
• The sm size field should be used in tighter layouts where space is scarce.
• There is currently not a setting in which lg size fields are used.

Best Practices

• Use a field label whenever possible so that the purpose of a field is clear.
• Don’t rely on placeholder text to communicate the intent of a field.

Component Specs

API

• class: string | Default: undefined
  Extra classes provided to the component.

• disabled: boolean | Default: false
  Sets the input to be disabled.

• id: string | Default: undefined
  Sets the id of the input.

• helperText: string | Default: undefined
  Sets the helper text of the input.

• hiddenLabel: boolean | Default: false
  Sets the label of the input to be hidden.

• label: string | Default: undefined
  Sets the label of the input.

• labelClasses: string | Default: undefined
  Extra classes provided to the label.

• placeholder: string | Default: undefined
  Sets the placeholder of the input.

• size: 'sm' | 'default' | 'lg' | Default: 'default'
  Sets the size of the input.

• testId: string | Default: undefined
  Sets the test id of the input.

• value: string | Default: undefined
  Sets the value of the input.

Example

<script>
	import { InputSearch } from '@getprovi/craft-svelte';
</script>

<InputSearch placeholder="Placeholder text" id="id" bind:value label="Search label" />

Types

interface Props
	extends SharedLabelProps,
		Omit<SharedInputProps, 'state' | 'errorText' | 'disabled'> {
	disabled?: boolean;
}

interface SharedInputProps extends Omit<HTMLInputAttributes, 'size'> {
	class?: string | null | undefined;
	errorText?: string | undefined;
	helperText?: string | undefined;
	id: string;
	placeholder?: string | undefined;
	size?: InputSize;
	state?: InputState;
	testId?: string | undefined;
	value?: string;
}

interface SharedLabelProps {
	hiddenLabel?: ComponentProps<Label>['hidden'];
	label: ComponentProps<Label>['label'];
	labelClasses?: ComponentProps<Label>['class'];
}