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} />;
}

With action


import { AiInput } from '@camp/ai-input';
 
const myAction = () => (
  <AiButton data-testid="action-button" appearance="primary" size="medium">
    Action
  </AiButton>
);
 
function MyComponent() {
  return (
    <AiInput
      label="Input with actions"
      placeholder="actions available for this input"
      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