Skip to content
search icon
clear
Component Status

Figma

How to add

  1. Locate the Assets tab in the Layers Panel.
  2. There are two ways to locate the Search components needed:
    • Use the search bar to search for a component grouping name or variation name.
    • Scroll through the folders list and open the relevant grouping.
  3. Once the component needed is located, click and drag it into the frame/artboard.

How to use

  1. Place the Search field needed on the frame/artboard.
  2. If needed, place the Search Scope on the frame/artboard.
  • Make sure to leave 2px between the field and the scope.
  • If using a Menu that supports typing, keep the cursor layer visible, otherwise hide the layer.
  • Hide the hover hand or hover cursor layer based on your needs.
  1. Edit the text. Do not change the icons.
  2. Never add height, only resize horizontally in width.
  3. Select all the Search layers and group them together, always naming the grouped layer.

API

PropertyTypeRequiredDefaultDescription
classNameStringfalse[Empty String]@ignore
placeholderStringfalse[Empty String]Placeholder
disabledBoolfalsefalseDisabled state
onChangeFuncfalseundefinedonChange handler
defaultValueStringfalse[Empty String]Default value for search field
valueStringfalseundefinedValue for search field
onBlurFuncfalseundefinedonBlur handler
onFocusFuncfalseundefinedonFocus handler
Edit this page on GitHub