Astryx Design System

Usage

Rich text input for the chat composer. Supports trigger menus (type @ or / to open a typeahead), inline tokens rendered as badges, message history recall with ArrowUp/Down, paste/drop file handling, and a 16px touch-device font-size floor to prevent iOS input zoom. Pass it to ChatComposer's input slot when you need more than a plain textarea.

ts
import {ChatComposerInput} from '@astryxdesign/core/Chat'

Examples

Common configurations, variations, and states.

ChatComposerInput — Controlled

Controlled chat input with live value display. Use controlled mode when you need to read or transform the input value outside the composer.

ChatComposerInput — Disabled

Composer in a disabled state. Use when the input should be visible but not interactive, such as during streaming or when a prerequisite is unmet.

ChatComposerInput — Mentions

Chat input with an @ trigger that opens a typeahead menu for mentioning users. Selected names appear as inline tokens.

ChatComposerInput — Multiple Triggers

Chat input with both @ mentions and / commands. Each trigger type renders tokens in a distinct color so users can tell them apart at a glance.

ChatComposerInput — Slash Commands

Chat input with a / trigger for command selection. Use for AI assistants or bots that support structured commands.