AI Input

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

Overview

Resources

Install


yarn add @camp/ai-input

Usage

Basic usage

The AI Input component provides a consistent input experience with built-in support for labels, validation states, and theming.


import { useState } from 'react';
import { AiInput } from '@camp/ai-input';
 
function MyComponent() {
  const [value, setValue] = useState('');
 
  return (
    <AiInput
      label="Input label"
      placeholder="Enter text here"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

Best practices

Use the default appearance for form inputs, search fields, and data entry scenarios
Use the inline-edit appearance for content that users can edit directly, such as page titles, headings, or descriptions
Always provide a label for accessibility, even if visually hidden
Use the invalid prop to indicate validation errors
Avoid using placeholders with inline-edit appearance; use labels or default values instead
When using inline-edit with textAppearance, ensure the typography matches the surrounding content

Content guidelines

✅ DO

Use clear, descriptive labels that explain what information is expected
Provide helpful placeholder text for default appearance inputs
Use inline-edit appearance for content that should feel like editable text

🚫 DON’T

Use vague labels like ‘Input’ or ‘Field’
Use placeholder text with inline-edit appearance; use labels or default values instead
Use inline-edit appearance for form fields that require explicit user action

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

Default appearance

The default appearance provides a standard form input with visible borders and background. This is the default behavior when no appearance prop is specified.


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

Inline-edit appearance

The inline-edit appearance creates a seamless editing experience where the input appears as static text until hovered or focused. This is ideal for editing content inline, such as page titles, headings, or descriptions.


import { AiInput } from '@camp/ai-input';
 
function MyComponent() {
  return (
    <AiInput appearance="inline-edit" label="Editable title" value="Click to edit this text" />
  );
}

Inline-edit invalid state

Inline-edit inputs show validation errors with a destructive border when hovered or focused.


import { AiInput } from '@camp/ai-input';
 
function MyComponent() {
  return (
    <AiInput
      appearance="inline-edit"
      label="Invalid title"
      value="This content is invalid"
      invalid={true}
    />
  );
}

Inline-edit disabled state

Disabled inline-edit inputs appear as static text and do not respond to hover or focus interactions.


import { AiInput } from '@camp/ai-input';
 
function MyComponent() {
  return (
    <AiInput
      appearance="inline-edit"
      label="Disabled title"
      value="Cannot edit this text"
      disabled={true}
    />
  );
}

Inline-edit with text appearance

When using the inline-edit appearance, you can apply typography styles using the textAppearance prop. This allows the input to match surrounding text styles like headings, body text, or labels. The textAppearance prop only applies when appearance="inline-edit".


import { AiInput } from '@camp/ai-input';
 
function MyComponent() {
  return (
    <>
      {/* Heading styles */}
      <AiInput
        appearance="inline-edit"
        textAppearance="heading-large"
        label="Page title"
        value="Editable Heading"
      />
 
      {/* Body styles */}
      <AiInput
        appearance="inline-edit"
        textAppearance="body-medium"
        label="Description"
        value="This is editable body text"
      />
 
      {/* Eyebrow styles */}
      <AiInput
        appearance="inline-edit"
        textAppearance="eyebrow-medium"
        label="Category"
        value="Featured Article"
      />
    </>
  );
}

Text alignment

Control the text alignment within the input using the textAlign prop. This is useful for centered inputs or when aligning with surrounding content.


import { AiInput } from '@camp/ai-input';
 
function MyComponent() {
  return (
    <>
      <AiInput label="Left aligned (default)" value="This text is left-aligned" textAlign="left" />
 
      <AiInput label="Center aligned" value="This text is center-aligned" textAlign="center" />
 
      <AiInput
        appearance="inline-edit"
        textAppearance="heading-large"
        label="Centered heading"
        value="Big Centered Title"
        textAlign="center"
      />
    </>
  );
}

With prefix

Add a prefix element (such as an icon) at the start of the input. Use small size icons only.


import { AiInput } from '@camp/ai-input';
import { SearchSmall } from '@camp/icon';
 
function MyComponent() {
  return (
    <AiInput
      label="Search input"
      placeholder="Search..."
      prefix={<SearchSmall fill="icon-decorative" title="Search" />}
    />
  );
}

With suffix

Add a suffix element (such as an icon) at the end of the input.


import { AiInput } from '@camp/ai-input';
import { CalendarEventSmall } from '@camp/icon';
 
function MyComponent() {
  return (
    <AiInput
      label="Date selection"
      placeholder="Select a date"
      suffix={<CalendarEventSmall fill="icon-decorative" title="Calendar" />}
    />
  );
}

Inline-edit with prefix and suffix

The inline-edit appearance works seamlessly with prefix and suffix elements, maintaining the transparent appearance until hovered or focused.


import { AiInput } from '@camp/ai-input';
import { SearchSmall, CalendarEventSmall } from '@camp/icon';
 
function MyComponent() {
  return (
    <>
      <AiInput
        appearance="inline-edit"
        label="Searchable content"
        value="Searchable text"
        prefix={<SearchSmall fill="icon-decorative" title="Search" />}
      />
 
      <AiInput
        appearance="inline-edit"
        label="Date selection"
        value="2024-01-15"
        suffix={<CalendarEventSmall fill="icon-decorative" title="Calendar" />}
      />
 
      <AiInput
        appearance="inline-edit"
        label="Full featured"
        value="With both prefix and suffix"
        prefix={<SearchSmall fill="icon-decorative" title="Search" />}
        suffix={<CalendarEventSmall fill="icon-decorative" title="Calendar" />}
      />
    </>
  );
}

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