Config card module attributes

Switch

Used when the attribute fields are type boolean.

RTP passthrough

<Label position="top">
  RTP passthrough
  <Switch slot="input" />
</Label>

Text input

Used for type string when it is not choosing an existing object.

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

RTSP address

<Label>
  RTSP address
  <Input
    slot="input"
    cx="max-w-[200px]"
    placeholder="rtsp://"
  />
</Label>

Dropdown select

Used when selecting an existing component or service (type string) or type generic array defining a list of valid values.

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

Camera name

<Label slot="component">
  Camera name
  <SearchableSelect
    client:load
    slot="input"
    placeholder="Choose component"
    options={[
      'First option',
      'Second option',
      'Third option',
      'Something else',
      'With a whole lot of components'
    ]}
    exclusive
  />
</Label>

Group of text input

Used for type object array or nested objects.

Example nested object:

Field 1

Field 2

Field 3

Field 4

<div class="flex flex-col gap-3">
  <Label>Example nested object:</Label>
  <div class="flex flex-row gap-3">
    <Label required="true">
      Field 1
      <div slot="input">
        <Input
          cx="max-w-[200px]"
          placeholder="Example regex"
        />
      </div>
    </Label>
    <Label required="true">
      Field 2
      <div slot="input">
        <Input
          cx="max-w-[200px]"
          placeholder="Example regex"
        />
      </div>
    </Label>
    <Label required="true">
      Field 3
      <div slot="input">
        <Input
          cx="max-w-[200px]"
          placeholder="Example regex"
        />
      </div>
    </Label>
    <Label required="true">
      Field 4
      <div slot="input">
        <Input
          cx="max-w-[200px]"
          placeholder="Example regex"
        />
      </div>
    </Label>
  </div>
</div>

Number input

Used for type integer, number, float when there is no explicit min/max listed or the user is not likely to experiment with the value.

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

Value

<Label>
  Value
  <NumericInput
    cx="max-w-[80px]"
    placeholder="0"
  />
</Label>

Slider

Used for type integer, number, and/or float with a minimum or maximum explicitly listed or the user is likely to experiment with the value.

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

Threshold

0 100

0

<Label>
  Threshold
  <RangeInput cx="max-w-[300px]" />
</Label>