Components v5.0.0 — 18 new components, Light DOM APIs, and updates across forms, filters, data display, and navigation.See what's new

ClickorKeyboard shortcut Alt + L

Dragto resize

Nord Design System SearchDeveloperDeveloperGetting startedUsing Web ComponentsWebfontsCDNLocalizationCSS Framework Legacy ESLint PluginWorking with AIFAQDesignDesignGetting startedFoundationsAccessibilityColor SystemColor UtilitiesPrinciplesFigma ToolkitGridIconographyNamingNordhealth BrandTypographyThemesBrand assetsToolsComponentsComponentsAccordion New Aside New Autocomplete New AvatarBadgeBannerButtonButton GroupCalendarCard Updated Chart New Chat New Chat AttachmentChat ComposerChat Composer DrawerChat Composer InputChat Dictation ButtonChat Layout Scroll ButtonChat MessageChat Message BubbleChat Message ListChat Message MetadataChat Send ButtonChat System MessageChat TokenChat Tokenized TextChat Tool CallsCheckboxCollapsible New Combobox New Command MenuData Table New Date PickerDate Range Picker New DividerDrawer Updated DropdownEmpty StateField New FieldsetFilter Bar New FooterHeaderIconInputInput Group New Item New Kbd New LayoutMessageMeter New Modal Updated NavigationNotificationNumber Field New Otp Field New Outline New Overflow List New Pagination New PopoutProgressProgress BarQrcodeRadioRangeResizable New Rich Text Editor New Scroll Area New Segmented ControlSelectSkeletonSpinnerStackTabTableTagTextareaTime Picker New Timestamp New ToastToggleTooltipTop BarTruncate New Visually HiddenDesign TokensDesign TokensTailwind CSSTailwind CSSBlocksBlocksTemplatesTemplatesIconsIconsPlaygroundPlaygroundLatest UpdatesLatest UpdatesChangelogChangelogMigration guidesMigration guides
GitHub

Clickto expandKeyboard shortcut Alt + L

Chat Composer Drawer Alpha Light DOM & Tailwind

Adds a controlled or uncontrolled disclosure region to a Chat Composer.

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 Drawer presents attachments, feedback, progress, or context inside the Chat family while retaining the original consumer nodes.

import "@nordhealth/components/lib/ChatComposerDrawer"

Composition

Disclosure state

The presence of count enables disclosure behavior and displays the normalized item count. Omit open for uncontrolled behavior and use default-open only for the initial state. For controlled behavior, set the open JavaScript property and echo the proposed value from the bubbling nord-toggle event. label names the region and trigger.

Examples

Always-visible drawers

Drawers without disclosure configuration remain an always-visible composition region. The component never serializes, clones, or moves its consumer content.

Accessibility

The disclosure trigger exposes expanded state and controls the labelled Drawer host. Consumer content remains a direct child of that region, preserving framework ownership and its natural interaction order. Use a concise label which describes the content, and do not hide essential validation or blocking status inside a closed drawer.

API reference

ChatComposerDrawer

Collapsible Composer region for attachments, feedback, progress, or context. Consumer nodes remain direct children so framework renderers retain ownership of their DOM relationships. The host itself is the disclosure region. The disclosure is intentionally a native button: Nord Button does not expose aria-controls on its shadow-owned control, which this composite requires.

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

Props

PropertyAttribute Description TypeDefault
openopenControlled open state. Leave undefined for uncontrolled state.boolean | undefined—
defaultOpendefault-openInitial uncontrolled state.booleanfalse
labellabelDisclosure label.string | undefined—
countcountOptional item count. Its presence enables disclosure behavior.number | undefined—
disableddisabledPrevents disclosure interaction.booleanfalse

Slots

Slot name Description
Default slotDrawer content.
EventDetail TypeDescription
nord-toggleChatComposerToggleEventReports an open-state proposal.

CSS Properties

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

PropertyDescriptionDefault
--n-chat-composer-drawer-max-block-sizeMaximum expanded drawer size.20rem
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.