Search Field
Pill-shaped search box, so it reads differently from form inputs.
Usage
import { SearchField } from '@smartui/react';
import '@smartui/react/styles.css';When to use
- Searching a list or a table.
When not to use
- Regular form input. Use Field.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | required | Visually hidden. |
placeholder | string | required | Says what can be searched. |
variant | 'raised' | 'flat' | 'raised' | |
size | 'sm' | 'md' | 'lg' | 'md' | |
value, onChange, onSubmit, onClear | string and handlers | - |
Accessibility
- Announced as a search box.
- Escape clears the value. The clear button has its own label.