Menu Icon

Search Box

A search box allows data search of entered text input. They let users searching and showing of grouped input.

Usage

Size comes with four different types of input entry area to enter. They can be small, middle, large or default.

Guidance

  • Search Boxes should indicate a placeholder with text explanation.
  • Consider activating enter button to allow user start searching by pressing enter key on keyboard.

When to use

  • Use Search Boxes to let user search input on dense environments.

Additional info

  • Consider displaying loading notification during searching if a dense data source is searched and exploring lasts a long time.

Variations

  • The updatable properties of Search Boxes are placeholder and size.
  • The updatable behaviours of Search Boxes are enter button and loading.
  • The updatable style features of Search Boxes are margin, padding, size, overflow, typography, background, border, effects and css.
  • The updatable style features of Password Wrappper are margin, padding, size, overflow and css.
  • The usable dynamic properties of Search Boxes are placeholder, enterButton, loading, size, suffix, prefix, disabled, hidden and style.