We will continue to evolve this pattern and the usage guidelines based on insights from product teams and other experts across SAP. Please submit feedback for improvements through the Design System Jira (select “Business AI” in the Stakeholder field), and check our AI prompt input Jira ticket and AI patterns roadmap for the latest updates.
Current version 1 has been reviewed by the SAP design system team and the following activities are in progress: accessibility review of specifications and SAPUI5 and SAP Fiori technical planning.
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 modalities 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 the Designing Effective AI Prompts article, and Quick Prompts, and Guided Prompts patterns.
Quick prompts examples in AI menu
Usage
Do
- Use AI Prompt Input to facilitate custom prompts written by users to instruct AI systems.
- Use it when users need to provide additional context.
- 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.
Don't
- Avoid using AI prompt input and custom prompts for straightforward tasks to prevent unnecessary complexity.
- Don’t use when AI can support a limited number of tasks; use quick prompts instead.
- Avoid limiting input options to only one modality when users may benefit from utilizing multiple modalities.
- Don’t rely solely on AI Prompt Input for tasks requiring highly technical or domain-specific knowledge that may be better suited for traditional input methods or specialized interfaces.
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 the time of a valid input.
- Character Count (optional): Displays the number of input characters in real-time over the total character limit.
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 Button: Enabled state based on valid input
- Popover: Content area slot provides suggestions based on input
For more information, see utilized and reused components in this pattern: Label, Input Field, Icon Button, Popover, and character count from the text area component.
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
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
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, and Text Area for 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 the time of a valid 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
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 (X) in 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
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 input field placeholder text.
Responsible AI
Letting users create their prompts using AI Prompt Input gives them more freedom, but it can also lead to issues like getting wrong answers when the prompts are unclear or too specific, and there’s 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 AI Prompt Input transparently, indicating that users engage 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 prompts’ language, tone, and content to identify any biases or stereotypes that may be present.