Intro

The AI prompt input is a core UI element for interacting with generative AI systems. Its primary function is facilitating instructions for AI systems expressed in natural language: custom prompts written by a user. In addition to text, it may also support other input options, such as images, voice, or various file formats.

This component is part of a set of UI elements and UX patterns for instructing or prompting generative AI. For more information, see Designing Effective AI Prompts and the patterns for quick prompts and guided prompts.

Quick prompts examples in AI menu

Quick prompt example in AI menu

Note: Custom prompts are instructions the user writes from scratch in natural language for AI to follow when generating outputs. They allow users to explore a wide range of possibilities, collaborate with the AI, and generate diverse outputs far faster than humanly possible. They encourage creative freedom and can be valuable for writing, brainstorming, or generating ideas.

Usage

Use the AI prompt input:

To facilitate custom prompts written by users to instruct AI systems.
When users need to provide additional context.

Don't

Don’t use the AI prompt input and custom prompts for straightforward tasks. Avoid unnecessary complexity.
Don’t use the AI prompt input if the AI supports a limited number of tasks. Use quick prompts instead.
Don’t rely solely on the AI prompt input for tasks requiring highly technical or domain-specific knowledge that may be better suited for traditional input methods or specialized interfaces.

Improve query input efficiency and accuracy by incorporating predictive text features like typeahead suggestions, auto-completion, and error correction.
Leverage AI input fields to create personalized interactions that adapt and learn from user input over time.
Avoid limiting input options to only one modality when users may benefit from utilizing multiple modalities.

Anatomy

An AI prompt input allows users to write custom instructions for AI in natural language to guide the generation of content tailored to their needs.

Label (optional): Describes the intent of the text input from cell.
Input field: Indicates selectable area where input values are displayed.
Submit button: Disabled until a valid input is available.
Character count (optional): Displays the remaining number of characters that can be input in real time.

Anatomy of default AI Prompt Input

Anatomy of default AI prompt input

Trailing action: For example, you can enable a Clear icon to remove the text that has been typed into the field.
Submit b utton: Enabled state based on valid input.
Popover: Content area slot provides suggestions based on input.

For more information, see the components that are utilized and reused in this pattern: label, input, button, popover, and character count from the text area component.

Anatomy of selected AI Prompt Input

Anatomy of selected AI prompt input

Types

AI Prompt Input with Label

Always provide a meaningful label (1) for any input field. Labels are necessary to indicate the meaning of the input fields when the placeholders are no longer visible. To indicate that a particular field is mandatory, set the “Required” indicator for the label.

Example: AI Prompt Input with Label

Example: AI prompt input with label

AI Prompt Input with Character Counter

If you have set a character limit (1) without restricting text input, the counter indicates how many characters are left, or how many characters exceed the limit.

Example: AI Prompt Input with Character Counter

Example: AI prompt input with character counter

Behavior and Interaction

This pattern primarily inherits its mouse and keyboard interaction specifications from the base components it utilizes.

For more information see: label, input, button, popover, text area (including text area with character limit and text area counter).

Enabled

The AI Input field is currently active and allows user interaction. It can be empty, contain a placeholder text, or contain a value entered or selected by the user. The Submit action is disabled until a valid input is available.

Example: Enabled AI Prompt Input

Example: Enabled AI prompt input

Disabled

All interactive functions have been removed and the user is unable to interact with the input field. The field can’t be focused on or recognized by screen readers and doesn’t need to meet visual contrast requirements.

Example: Disbaled AI Prompt Input

Example: Disabled AI prompt input

Suggestions and Autocomplete

Using suggestions and autocomplete is the quickest way for users to discover and select relevant input terms and values.

The current typed term is always highlighted with bold text.
Only the characters entered in the input field are highlighted, not the whole word.
All relevant instances are highlighted, even if they occur in one line item.

Clear

You can enable a Clear icon :icon-decline1in the input field. It appears as soon as the input field has a value. Selecting the Clear icon removes the value from the field. If you use this option, make sure that the input field is wide enough to show the clear icon in addition to the value.

Example: Clear Input within AI Prompt Input

Example: Clear input within AI prompt input

Terminology

The placeholder text should be specific enough to guide the user on what the AI can assist them with. The text should be concise, avoiding overly technical language, unless suitable for the target audience.

Do not repeat the label in the placeholder text.

For more information, see the UI text guidelines for placeholder text.

Responsible AI

Allowing users to create their prompts using the AI prompt input gives them more freedom, but it can also lead to issues, such as getting incorrect answers when the prompts are unclear or too specific, and there is a risk of perpetuating bias.

We will continue developing usage guidelines for this UI element and related custom prompt patterns (coming soon), including guiding the user in writing quality prompts and preventing bias. In the meantime, follow the guidelines below to get the most out of custom prompts and mitigate the risks.

Be transparent about the use of AI

Use the AI prompt input transparently: indicate that users are engaging with AI-powered features. Avoid any misleading language, like labels and placeholder text that may obscure the involvement of AI.

Mitigate bias in imperfect user prompts

Implement measures to detect and flag potentially biased prompts, such as algorithms that analyze the language, tone, and content of the prompt to identify any biases or stereotypes.