<h2>When to use</h2>
<p>Wherever topic suggestions are shown, a user input field is presented as a supplemental method of interaction with the Virtual Assistant (VA). This field is persistent in the side panel and full screen, and also used on the home page and FAB (floating action button).</p>
<p><strong>Use chat input to:</strong></p>
<ul>
<li>Ask or answer questions and make requests </li>
<li>Enter conversational input and interactions</li>
<li>Enable voice input to improve accessibility or efficiency</li>
<li>Replace traditional search function</li>
</ul>
<p><strong>Don’t use chat input to capture information when:</strong></p>
<ul>
<li>Users need to make exact selections from dropdown menus</li>
</ul>
<h2>Anatomy</h2>
<p>xxxxxxx</p>
<details data-name='image-block' data-images='[{"alt":"","caption":"\nThe chat input can include up to eight elements:\n\n\n\n1. **Container:**\n\n    \n\n   The surface that contains all chat input elements.\n2. **Input field:**\n\n    \n\n   Accepts user-entered text and displays placeholder text when empty. Supports up to 200 characters.\n3. **Primary button:**\n\n    \n\n   Submits the user&#39;s prompt and initiates the AI response.\n4. **Microphone icon (optional): P**\n\n   ositioned before the action button. Enables voice input. Display only when voice functionality is available.\n5. **Character Counter:**\n\n    \n\n   Displays the current character count (for example, 270/500). When the limit is reached, display the message: \"Maximum character count reached. 200/200.\"\n6. **Helper or system message:**\n\n    \n\n   Displays guidance, validation, or status information below the input. (e.g., “Maximum character limit reached”)\n\n\n**AI icon**\nUse the AI icon to identify AI-powered chat inputs that appear outside the Virtual Assistant experience, such as AI Entry Chat and FAB experiences. Do not display the icon within the Virtual Assistant experience. When present, the icon remains visible on focus.","url":"https://dds.dell.com/site/v3/ai/documentation-visual-assets/chat-input/chat-input-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>


## Usage

Chat input is a conversational input component designed for AI-driven experiences. It combines traditional text input with multimodal affordances such as voice input and AI action triggers, enabling users to interact with systems using natural language.

Chat input supports open-ended queries, dynamic suggestions, and real-time feedback, making it suitable for chat, prompts, and AI-assisted workflows.

**Do:**

* Anchor the component to the bottom of the viewport or chat window for easy access
* Provide real-time feedback (counters, errors)
* If enabling file upload, do mention file size limitations
* Use clear placeholder text to guide input

**Don’t:**

* Squeeze the chat into narrow sidebars that make text difficult to read
* Include critical instructions, such as character limits or file size restrictions, in placeholder text

<details data-name='image-block' data-images='[{"alt":"","caption":"\nExample of a chat input component.","url":"https://dds.dell.com/site/v3/ai/documentation-visual-assets/chat-input/chat-input-usage-.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Kinds

The chat input is available in **single-line** and **multi-line** variants, with an optional **character counter** element.

<details data-name='image-block' data-images='[{"alt":"","caption":"Single-line and multi-line variants.","url":"https://dds.dell.com/site/v3/ai/documentation-visual-assets/chat-input/ai-chat-input-kinds-2.png"},{"alt":"","caption":"Optional character counter.","url":"https://dds.dell.com/site/v3/ai/documentation-visual-assets/chat-input/ai-chat-input-character-counter.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Sizes

Chat input has two sizes:

* **Small**: Compact height. Suitable for dense layouts or embedded use.
* **Large**: Increased padding and typography. Suitable for primary interaction surfaces.

<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/ai/documentation-visual-assets/chat-input/ai-chat-input-sizes-2.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Interactions

### Behavior and states

Chat input component responds to user interaction and display visual changes based on its state. It communicates five states: rest, hover, focus, error, and loading.

<details data-name='image-block' data-images='[{"alt":"","caption":"\nStates for empty/rest chat input.","url":"https://dds.dell.com/site/v3/ai/documentation-visual-assets/chat-input/ai-chat-input-not-filled.png"},{"alt":"","caption":"\nStates for filled chat input.","url":"https://dds.dell.com/site/v3/ai/documentation-visual-assets/chat-input/ai-chat-input-filled.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Standards

### Accessibility

**Ensure keyboard navigation**

All interactive elements must be fully operable using only a keyboard without getting stuck.
WCAG 2.2: [2.1.1 Keyboard ](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html)

**Provide ARIA labels**

Invisible text labels must be assigned to icons and fields so assistive technologies can read their purpose.
WCAG 2.2: [4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html) 

**Maintain color contrast** 

Text, focus indicators, and error borders must stand out sharply against the background so users with low vision can see them.
WCAG 2.2: [1.4.3 Contrast (Minimum),](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) [1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) 

**Support screen readers**

Live status updates, like character counts and errors, must be spoken automatically to screen reader users without shifting their focus.
WCAG 2.2: [4.1.3 Status Messages](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html) 

**Ensure voice input accessibility fallback (where using voice mode)**

Users must have a non-voice alternative (like typing or clicking) to perform any action, and voice triggers must not conflict with speech software commands.
WCAG 2.2: 2.5.3 Label in Name, [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html) 

### Content

**Placeholder text**

Be brief, conversational and action-oriented.

Examples:

* “Ask me anything”
* “Describe what you need”

**Helper text**

Provide constructive feedback. 

Examples:

* “Maximum character limit reached”

**Error messages** 

Be clear, helpful, and constructive. State exactly what went wrong and how the user can fix it instantly.

Examples:

* File size error: "This file is too large. Please upload a file under XXMB."
* Format error: "Unsupported file type. Please use PNG, JPEG, or PDF."
* Network error: "Message failed to send. Please check your connection and retry." 

**Tone**

Friendly, supportive, and neutral. Avoid technical jargon unless needed.

Chat input serves as the primary interaction point for chat-based interfaces. It allows users to interact with AI using text, voice, and more.

Chat Input