Inputs

SearchField

Rounded search well with a clear button, used at the top of the Vault.

• Controlled: provide value and onChange(value). placeholder defaults to "Search your Visuallis".

Playground

Change the props, switch theme in the header, try Tablet and Phone widths, then copy the code.

Examples

Props

export interface SearchFieldProps {
  value?: string;
  onChange?: (value: string) => void;
  placeholder?: string
}

Use

import { SearchField } from '@visualli/design-system/components';

Source: components/src/ · Guidelines: components/catalog/SearchField/README.md