Chat Composer Component

This component is considered alpha. We're still finalising the API, so it may include a breaking change at any time — use it at your own risk.

Usage

Chat Composer is the form shell for the Chat family. It supplies a Composer Input and Send Button when those regions are omitted, while preserving explicitly supplied consumer nodes.

import "@nordhealth/components/lib/ChatComposer"

Set the value JavaScript property and echo native input changes for controlled use, or omit it for uncontrolled state. disabled, loading, and stop-shown coordinate the registered input and send action. Slots support a drawer, header actions/context, input, footer actions, send actions, and a custom send button without changing DOM order.

Submitting emits cancelable nord-submit with the trimmed plain-string value. Stop mode emits cancelable nord-stop instead. Error and warning status records can render at the logical start or end.

Examples

Loading

Set loading while a send or response transition must not be repeated. The composer disables its registered input and send action together, then restores both when loading ends. Keep a nearby live status for work whose progress is not otherwise visible.

Compact layouts

Use density="compact" where vertical space is limited. Density changes spacing only: multiline entry, keyboard submission, validation, and the send action retain the same behavior as the default layout.

Accessibility

Give the composer a label which distinguishes it from the surrounding conversation. Keep controls in a logical source order, label every custom action, and use loading/disabled state only while the corresponding interaction is actually unavailable. Calling focus() forwards focus to the registered Composer Input.

Templates

See this component composed into complete application views:

AI Assistant Template

A streaming assistant conversation with tool calls, dictation, attachments and a suggested-prompt empty state.

Ready

Conversations Template

A responsive inbox and message thread with resizable panels, overflow-aware actions and a persistent composer.

Ready

API reference

ChatComposer

Framework-neutral chat composition shell with controlled/uncontrolled value, form submission, send/stop state, and named light-DOM composition regions. The component never re-renders consumer nodes. Use slot values drawer, header-actions, header-context, input, footer-actions, send-actions, and send-button to document each direct child's role. Source order remains the semantic and keyboard order in every framework.

<nord-chat-composer></nord-chat-composer>

Props

Property	Attribute	Description	Type	Default
`value`	`value`	Controlled canonical value. Omit for uncontrolled state.	`string \| undefined`	—
`placeholder`	`placeholder`	Placeholder forwarded to the registered input.	`string \| undefined`	—
`disabled`	`disabled`	Disables editing and sending.	`boolean`	`false`
`loading`	`loading`	Marks a send as pending and prevents duplicate sends.	`boolean`	`false`
`stopShown`	`stop-shown`	Shows stop in place of send.	`boolean`	`false`
`density`	`density`	Composer spacing density.	`ChatComposerDensity`	`'balanced'`
`statusPosition`	`status-position`	Logical status placement.	`ChatComposerStatusPosition`	`'bottom'`

Slots

Slot name	Description
`drawer`	Composer Drawer or other context content.
`header-actions`	Leading compact actions.
`header-context`	Trailing context usage or progress.
`input`	Composer Input. A default is supplied when omitted.
`footer-actions`	Leading footer actions.
`send-actions`	Actions immediately before send.
`send-button`	Send Button. A default is supplied when omitted.

Methods

Method name	Parameters	Description
`reportValidity() => boolean`	N/A	Validates the registered input, or the containing form when there is one.
`focus(options?: FocusOptions) => void`	`options`: FocusOptions	Focuses the registered Composer Input.

Event	Detail Type	Description
`nord-submit`	`ChatComposerSubmitEvent`	Cancellable trimmed submission.
`nord-stop`	`ChatComposerStopEvent`	Cancellable stop intent.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

Property	Description	Default
`--n-chat-composer-background`	Composer surface.	`var(--n-color-surface)`
`--n-chat-composer-border`	Composer border.	`var(--n-color-border)`
`--n-chat-composer-border-radius`	Outer radius.	`var(--n-border-radius-s)`
`--n-chat-composer-padding`	Inner spacing.	`calc(var(--n-space-s)+var(--n-space-xs))`

Light DOM & Tailwind. This component renders in the light DOM, so you can style it directly with your own CSS or Tailwind utility classes — there is no shadow boundary, and its default styles are low specificity, so your utilities win.

Chat Composer Alpha Light DOM & Tailwind