COMPONENTS

Queryfield

Queryfield combines features of a data filter with a search and lookup field.

queryfield-intro

Queryfield allows the user to create advanced query combinations all within one field using a predetermined set of filter terms in addition to free-form text.

queryfield-anatomy
  1. Input field
  2. Search dimension
  3. Operator
  4. Value
  5. Clear button
  6. Options menu
  7. Query

Queryfield options are typically displayed in text-based menus. Custom inputs can be set to use other components like Date Picker to provide specific formatting.

queryfield-appearance-dropdowns

Queryfield can have a border or be borderless.

queryfield-appearance-borders

The default icon for queryfield is a search icon. It can be set to have a custom icon.

queryfield-appearance-borders

Queryfield has five core states — enabled, hover, focus, filled and disabled.

queryfield-behaviors

Queryfield is available in large, medium or small sizes.

queryfield-sizes