Core Component

Input

Text input with label, helper text, and error state. The foundation for all form-based interactions.

Preview

System prompt

Define the AI's behavior

Source

Full component implementation using the design system tokens.

tsx

"use client";

export function DSInput({
  label,
  helperText,
  error,
  ...props
}: {
  label?: string;
  helperText?: string;
  error?: string;
} & React.InputHTMLAttributes<HTMLInputElement>) {
  const hasError = !!error;

  return (
    <div className="flex flex-col gap-1.5 w-full">
      {label && (
        <label className="text-sm font-medium text-foreground">{label}</label>
      )}
      <input
        className={`w-full px-3 py-2 text-sm text-foreground bg-surface border rounded-lg outline-none transition-colors placeholder:text-tertiary ${
          hasError
            ? "border-red-500 focus:border-red-500"
            : "border-overlay/10 focus:border-accent"
        }`}
        {...props}
      />
      {(helperText || error) && (
        <p className={`text-xs ${hasError ? "text-red-500" : "text-tertiary"}`}>
          {error || helperText}
        </p>
      )}
    </div>
  );
}

Props

All available props with types and defaults.

Prop	Type	Default	Description
`label`	`string`	`—`	Label text above the input
`helperText`	`string`	`—`	Helper text below the input
`error`	`string`	`—`	Error message — replaces helper text and turns border red
`placeholder`	`string`	`—`	Placeholder text inside the input

Variants

Default

Standard text input with label and helper text.

API Key

Your OpenAI API key

tsx

<DSInput
  label="API Key"
  placeholder="sk-..."
  helperText="Your OpenAI API key"
/>

Error

Validation error state with message.

Model name

Model not found in your workspace

tsx

<DSInput
  label="Model name"
  placeholder="gpt-4o"
  error="Model not found in your workspace"
/>

Without label

Compact input for inline use, like chat input bars.

tsx

<DSInput placeholder="Ask me anything..." />

Prompt Guide

Prompt Guide — Input

Use for

API key and configuration fields
Model selection and parameter inputs
Search and filter bars
Prompt input fields in settings

Don't use for

Multi-line text — use a textarea component
The main chat input — that needs specialized behavior (submit on Enter, multiline expansion)

AI Context

In AI settings panels: API keys, temperature sliders (pair with a range input), model name fields. The error state is critical for validation — 'Model not found', 'Invalid API key'. Helper text guides users: 'Find this in your dashboard'.