MedKit

Search ​

Overview ​

Search provides an input that allows users to find a term or terms by typing their query. Results can be returned in a number of ways both from local and remote sources as well as pre-fetched lists. Search fields ideally should be used where there are more than 10 options for a user to choose from. Unlike the select component, search does not use native elements.

By default our search field comes paired with the popover component. For most cases this provides the most useful pattern for search in our platform.

When to use
  • Use search to find something specific or explore what's available via relevant keywords.
  • Use search to help users find relevant content in large data sets quickly.
  • Use search when there are 10–10,000+ items available.
  • Consider using live-filtering search for 10–30 items.
When not to use
  • For a small number of options with a single term chosen, use a Select instead of search.
  • For a small number of options with multiple terms chosen, use a group of checkboxes instead.
  • Avoid using search when you're unlikely to show reliable results. For example, if most search queries return zero results, you might instead display top choices without search.

Interactive demo ​

The demo below allows you to preview the component. You can play with its props, variations, configuration options and dive into its events and even see them trigger in the event log tab.

MedKit Search
One
Error
string
Errors to display for the input.
Error Hidden
boolean
false
Only display the red border but not the error text.
Help Text
string
The help text to display for the input.
Is Loading
boolean
false
If the results are currently loading
Label
string
Required
The label to be shown above the input.
Label Hidden
boolean
false
Only display the label for screen readers.
Min Search Length
number
3
The minimum number of characters required to show search results
Multiple
boolean
false
If multiple values can be selected
Options
Array<SearchOption>
Required
The list of options that the user can select from.
Placeholder
string
The placeholder for the unselected value.
Required
boolean
false
If the field is required

Single Value ​

Default state ​

At rest this is what the search field will look like. Empty and with the placeholder visible.

vue
<template>
  <MedKitSearch v-model="selectedValue" label="Search" :options="options" />
</template>

Selected option ​

Once an option is selected it is displayed in a chip to make it clear that this is the selected value. The user can then clear the value by removing the currently selected option (clicking the x in the chip).

Knees
vue
<template>
  <MedKitSearch v-model="selectedValue" label="Search" :options="options" />
</template>

Multiple Values ​

Default state ​

Just as in the single value, this shows the component at rest.

Selected options ​

An example of multiple items selected as chips. Note how that on focus the user is always taken to the end of the currently selected elements.

Knees
Toes

As can be seen below search expands to fit all the options added by the user.

Knees
Toes
Fingers
Ears
Nose
Hair
Teeth
Eyes
Feet
Hand
vue
<template>
  <MedKitSearch v-model="selectedValues" label="Search" :options="options" multiple />
</template>

Minimum Search Length ​

By default the minimum search length is 3 characters. This is to avoid initially triggering a query to broad too early. However when conducting a local search where all the values are known, make sure to set the min-search-length to 0.

vue
<template>
  <MedKitSearch v-model="selectedValue" label="Search" :options="options" :min-search-length="0" />
</template>

Loading State ​

It's possible to pass the is-loading prop to hide results while a request is being made. The style of this is defined by the component. Click inside the search field to see it in action.

vue
<template>
  <MedKitSearch
    v-model="selectedValue"
    label="Search"
    :options="options"
    :is-loading="isLoading"
    :minSearchLength="0"
  />
</template>

No Results ​

When using this with a dynamic list or query if the list of options are empty then 'No results' will be displayed. Click inside the search field to see it in action.

vue
<template>
  <MedKitSearch v-model="selectedValue" label="Search" :options="options" />
</template>

Help Text ​

An error message returned from validation
vue
<template>
  <MedKitSearch label="Search" v-model="selectedValue" :options="options" :helpText="helpText" />
</template>

Error state ​

An error message returned from validation
vue
<template>
  <MedKitSearch v-model="selectedValue" label="Search" :options="options" :error="error" />
</template>

Figma Library ​

You can find the component in our MedKit Figma library.

Copyright © Big Picture Medical