AI Input

AI Input is a streamlined input component designed for Agent X experiences, providing consistent styling and enhanced accessibility.

Overview

Resources

Install

yarn add @camp/ai-input

Variations

Default input

import { AiInput } from '@camp/ai-input';
 
function MyComponent() {
  return <AiInput label="Default input" placeholder="Enter your text here" />;
}

Invalid state

import { AiInput } from '@camp/ai-input';
 
function MyComponent() {
  return <AiInput label="Invalid input" placeholder="Enter your text here" invalid={true} />;
}

Disabled state

import { AiInput } from '@camp/ai-input';
 
function MyComponent() {
  return <AiInput label="Disabled input" placeholder="This is disabled" disabled={true} />;
}

Accessibility

Keyboard support

• Standard input navigation using tab key to focus
• All standard text input keyboard interactions supported
• Arrow keys for text cursor navigation within the input
• Screen reader support for labels and validation states

Replacing this component in ACF App

The AI Input component provides a streamlined input experience with consistent styling for Agent X applications. The API is simplified compared to the ACF App Input component.

Migration example

Before:

import { Input } from '@/components/input/input';
 
<Input
  label="Company name"
  placeholder="Enter company name"
  invalid={hasError}
  disabled={isLoading}
/>;

After:

import { AiInput } from '@camp/ai-input';
 
<AiInput
  label="Company name"
  placeholder="Enter company name"
  invalid={hasError}
  disabled={isLoading}
/>;

Breaking changes

• Component name changes from Input to AiInput
• Import path changes from @/components/input/input to @camp/ai-input
• action prop is removed - use alternative patterns for input actions
• Core props (label, invalid, disabled) remain compatible
• All standard HTML input attributes are supported