Input

• A simple user input. We use this input to build all of the other input types. This is ideal for text, email, and password fields.

Placeholder

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

<Input
  cx="max-w-[200px]"
  placeholder="Placeholder"
/>

Labels

For accessibility, consider wrapping your <Input /> in a <Label />.

Use slot="input" to correctly render.

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

Full name

<Label>
  Full name
  <Input
    slot="input"
    cx="max-w-[200px]"
    placeholder="Eliot Horowitz"
  />
</Label>

Error states

These inputs can have two error states. Both implement the Input component’s error state, which includes changing the input field’s border to the semantic/danger-dark color, accompanied by an error icon to the right.

Error message below input

The first error state displays a message directly below the input field, also styled in semantic/danger-dark color text.

Full name

This field can’t be left blank.

<Label slot="component">
  Full name
  <div
    slot="input"
    class="mb-2 max-w-[200px]"
  >
    <Input
      slot="input"
      state="error"
    />
    <Label slot="component">
      <span class="text-danger-dark">This field can't be left blank.</span>
    </Label>
  </div>
</Label>

Error message in reactive tooltip

The second shows a reactive tooltip with error messaging.

Can only contain letters, numbers, dashes, and underscores

<div
  slot="component"
  class="relative flex flex-col items-center"
>
  <Input
    slot="input"
    state="error"
    class="mb-2 max-w-[200px]"
    value="/"
  />
  <Tooltip
    client:load
    location="bottom"
    state="visible"
  >
    <p slot="description">Can only contain letters, numbers, dashes, and underscores</p>
  </Tooltip>
</div>

Error state guidelines

When to use each error state

The reactive tooltip variant should only be used in cases with vertical space constraints around the input.

In general, use error messaging below inputs when vertical space is available below the input. Otherwise, use tooltip. Tooltips should be used in situations with limited space and/or padding. In these situations, the input usually does not have a label. Error messages should be used if a value is missing.

Numeric Input

A user input for numeric values. This is ideal for number and integer fields. The value can be incremented/decremented using the up/down arrow keys.

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

<NumericInput cx="max-w-[80px]" />

Slider Input

A user input for numeric values that allows easy adjustments with a slider. This is ideal for number and integer fields you expect the user to tweak often, and the value can be incremented/decremented using the up/down arrow keys.

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

<SliderInput cx="max-w-[80px]" />

Range Input

A user input for numeric values within a specified range that allows easy adjustments with a slider. This is ideal for number and integer fields you expect the user to tweak often, should be restricted between a min and max value, and the value can be incremented/decremented using the up/down arrow keys. It also includes a numeric input for direct inputs.

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

0 100

0

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

---

Helper text

Helper text below an input field surfaces supplementary information about an input to aid users in filling out fields correctly. It can also be used to clarify how the information will be used.

Use helper text sparingly and intentionally. Excessive helper text can clutter the interface and overwhelm users, especially in complex forms with many fields. Use only when users likely need extra guidance to complete a field correctly.

If the input label already provides sufficient context for filling an input, do not include helper text. If the information is less critical and the user does not need to directly reference it while filling in the input, consider using an info icon by the label with a tooltip to maintain a clean interface while still providing necessary context.

Use helper text…

• To provide clarifying information required to know how to correctly fill out the input
• To show helpful hints about required format (ex: “Format: MM-DD-YYYY”) or examples of the correct format

Don’t use helper text…

• If the input label already provides sufficient context for completing the action