canonical / canonical/vanilla-framework

[New component]: Prompt input field

Open
#5,657 3 comments 0 reactions 0 assignees View on GitHub
Priority: Medium Tier: Global WG: Validated
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

## Context

In order to accommodate for the AI functionality we are working on, an input filed is required where the prompting interaction can happen.
Use cases are:
- embedded search where searching happens across all sources - AI generated content, KB articles,
- asking a follow up question: specific for AI

Why existing components don't fit?
The search bar might discourage the user from formulate their issue in a descriptive way, users might be biased from their previous experience where shorter search prompts yielded better results. The search input does not expand to multiple lines -> this could be an alternative solution.
The text area is too large for this purpose and does not provide any clickable UI blocks/subcomponents at the moment -> other alternative solution.

The ideal solution would be a component between search bar and text area: an input field that expands automatically without the option of manual resizing.
Other considerations would be prompting specific functionality: example prompts, intent capturing, deep thinking mode, resource filtering.

See benchmarking:
Image

Where and when might this proposed pattern be used?

For now this is specific for one product, but as we might scale the solution it would affect multiple ones.

## Visual

v1:
Image

v2:

Image

## State

States would be inherited from input fields:
Default
Hover
Active
Focus
Disabled

## Open questions

Progressive enhancement:
A pattern should be designed small screen first. How does this pattern scale up?
How will this pattern degrade on less competent browsers?

tagging @lyubomir-popov and @minkyngkm for visibility

Contributor guide

Open the contributing guide

Research direction

Start by comparing the existing search bar and text area components, then use the supplied visual references to define the new prompt input's states and responsive behavior. Done means a reusable component that expands automatically without manual resizing and covers default, hover, active, focus, and disabled states; the progressive-enhancement questions also need resolution.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, sass
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.