Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
PrimitivesDisplayMessage input

Message input

The message composer's text field — an auto-growing textarea that emits koala-message-send on Enter and newlines on Shift+Enter, so every composer in the product behaves the same way.

<koala-message-input>

Message input

Composer status line

One line above the composer that always says what a reader can send and until when. Neutral for the reply window, warning for the final hour, danger for a blocked send — with an optional trailing action.

Free replies until 17:39.
Free replies close in 42 min, at 12:21.
Your last message wasn't delivered.
Andrew Gunn owns this conversation.

The composer's block action

Stands in for the composer itself when free text is not an option — matching the input box it replaces exactly, including its 44px minimum height.

API

name string
placeholder string?
label string
variant KoalaMessageInputVariant
send-disabled string? — An Alpine expression that, when true, disables sending — on top of the sending guard every composer already…
disabled bool — The whole composer is unavailable and cannot become available by typing — the caller lacks permission, or t…
send-label string — The send button's accessible name, for composers where sending does something more specific than "send" (lo…
send-label-binding string? — Alpine expression for the send button's accessible name, when it varies at runtime.
required bool — Whether the textarea refuses an empty submit.
icon IconName (koala-composer-status)
tone NeutralWarningDanger (koala-composer-status)
koala-composer-status-actions Slot — plain-text action on the status line, rendered as a sibling that wraps onto its own line rather than running inline with the sentence.
koala-composer-action Marker on a <button> — full-width, 44px minimum height, matches the input box it replaces.
soft bool (koala-composer-action) — the lower-emphasis primary-container tint.