CSSScript.com Demo Page
rich-input Web Component Demos
Download Back To CSSScript.Com
Keyword autocomplete, structured query parsing, native form behavior, and live in-input highlights in one familiar <input> surface.
01 / live surface
autocomplete + highlights
Search canvas
Music catalog query
ready
Type a keyword or keep writing naturally
Try la, label:"K, or use the arrow keys to move through suggestions.
Presets
Public methods
Enter search Esc close suggestions
02 / live data
getParsedQuery()
Query inspector
Structured output
Tokens and query shape
Free text
--
Configured keys
0
Caret index
0
Selection
0:0
- Interact with the input to record input, change, search, and selection events.
03 / integration lab
ElementInternals + MutationObserver
Forms and live configuration
Form-associated custom element
Submit a native form
Declarative configuration
Add a filter at runtime
Configured from one datalist
Add the filter, then type tempo: to open the new suggestions.
04 / surface details
disabled + readonly + ::part
States, parts, and slots
Native input states
Same component, different constraints
Disabled
disabled
Read only
readonly
Empty
focus + clear
Shadow DOM styling
Custom parts and leading content
::part(control)
::part(input)
::part(popover)
::part(suggestion-item-active)