Select

A simple user input for selecting from a list of options. This is an implementation of the native HTML <select /> with our styles applied.

Basic

import { Select } from '@viamrobotics/prime-core';

<Select cx="max-w-[200px]">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <optgroup label="More options">
    <option>Option 4</option>
    <option>Option 5</option>
    <option>Option 6</option>
  </optgroup>
</Select>

Searchable

import { Label, SearchableSelect } from '@viamrobotics/prime-core';

Searchable select

<Label>
  Searchable select
  <SearchableSelect
    client:load
    slot="input"
    placeholder="Search options"
    options={[
      'First option',
      'Second option',
      'Third option',
      'Something else',
      'With a whole lot of parts'
    ]}
    exclusive
  />
</Label>

Searchable with arbitrary text

import { Label, SearchableSelect } from '@viamrobotics/prime-core';

Searchable select with create

<Label>
  Searchable select with create
  <SearchableSelect
    slot="input"
    placeholder="Type to find or create..."
    otherOptionPrefix="Other:"
    options={['Hello', 'From', 'The other side']}
    sort={SortOptions.REDUCE}
  />
</Label>

Searchable with icons

import { Label, SearchableSelect } from '@viamrobotics/prime-core';

Select an OS/Platform

<Label>
  Select an OS/Platform
  <SearchableSelect
    slot="input"
    exclusive
    placeholder="Type to find or create..."
    options={[
      {
        value: 'linux-aarch64',
        label: 'Linux (Aarch64)',
        icon: 'linux'
      },
      {
        value: 'linux-x86',
        label: 'Linux (x86_64)',
        icon: 'linux'
      },
      {
        value: 'linux-arm7l',
        label: 'Linux (Arm7l)',
        icon: 'linux'
      },
      {
        value: 'macos',
        label: 'Mac',
        icon: 'apple'
      },
      {
        value: 'windows',
        label: 'Windows',
        icon: 'windows'
      }
    ]}
  />
</Label>

Searchable with descriptions

import { Label, SearchableSelect } from '@viamrobotics/prime-core';

Select a MlModel

<Label>
  Select a MlModel
  <SearchableSelect
    slot="input"
    exclusive
    placeholder="Type to find or create..."
    options={[
      {
        value: 'uuid-1',
        label: 'viam:catdetector',
        description: 'tflite'
      },
      {
        value: 'uuid-2',
        label: 'nasa:asteroid-classifer',
        description: 'pytorch'
      },
      {
        value: 'uuid-3',
        label: 'viam:plate-reader',
        description: 'tflite'
      },
      {
        value: 'uuid-4',
        label: 'apple:face-detection',
        description: 'metal'
      },
      {
        value: 'uuid-5',
        label: 'mug-detector',
        description: 'tflite'
      }
    ]}
  />
</Label>

Searchable with multiple

import { Label, SearchableSelect } from '@viamrobotics/prime-core';

Select multiple options

<Label>
  Select multiple options
  <SearchableSelect
    slot="input"
    options={[
      'First option',
      'Second option',
      'Third option',
      'Something else',
      'With a whole lot of parts'
    ]}
    sort={SortOptions.REDUCE}
    exclusive
    multiple
  />
</Label>

Quick-add suggestions

An optional add-on to Select and Multiselect inputs that aims to speed up common tasks by reducing the need to open the full input. The pattern surfaces options based on a user’s recent activity and lets users apply them with a single click.

This functionality is intended to be secondary to the Select/Multiselect inputs. Ensure that the options being shown are relevant. It is better to show nothing than to surface irrelevant options. Display a maximum of 3 items, with the most recent first.

Since users can apply options with a single click, they should also be able to revert the action with a single click. If a user applies an option, the option should disappear from the Recents. If they then remove the option from the Multiselect, it should reappear in Recents.

Use this pattern…

• For inputs that are likely to be high-traffic
• When users are likely to select the same items repeatedly (ex: adding many individual images to a dataset)
• When the user’s recent choices are likely to be relevant

Untitled