SearchInput

The SearchInput component is used to get user search input. It is usually used together with a FormControl to provide an accessible label, validation messages, etc.

Import

import { SearchInput } from '@sajari-ui/core';

import { SearchInput } from '@sajari-ui/core';

Usage

Here's a basic usage of the SearchInput component.

Editable Example

<SearchInput placeholder="Basic usage" />

<SearchInput placeholder="Basic usage" />

Props

You can also pass all React.InputHTMLAttributes.

Name	Type	Default	Description
`aria-label`	`string`		Accessibility label to use, in scenarios where the input has no visible label. A11y: It's usefult for screen readers.
`aria-describedby`	`string`		Accessibility label to use, in scenarios where the input has no visible label. A11y: It's usefult for screen readers.
`loading`	`boolean`	`false`	If `true`, the search icon is replaced by a spinner.
`disabled`	`boolean`	`false`	If `true`, the input is disabled. This sets `aria-disabled=true` and you can style this state by passing `_disabled` prop.
`invalid`	`boolean`	`false`	If `true`, the `input` indicates an error. This sets `aria-invalid=true` and you can style this state by passing `_invalid` prop.
`required`	`boolean`	`false`	If `true`, the input element is required.
`readOnly`	`boolean`	`false`	If `true`, prevents the value of the input from being edited.