comment-box

Form-associated comment form composing with Submit/Cancel buttons. Standalone or as the reply-form template inside .

Overview

<comment-box> is a small form-associated primitive that wraps <markdown-editor> with the canonical Submit / Cancel button row. It's used standalone for top-level comment forms or as the reply-form template inside a <comment-thread>.

The component is presentational with respect to persistence. The submit event is cancellable: on success the value is cleared automatically, but if the author preventDefault()s (e.g., the network call fails), the value is preserved.

When to use which primitive

Use this	When
`<comment-box>`	You want a standalone comment / reply form with Submit + Cancel and form participation.
`<markdown-editor>`	You just want the editor — no Submit/Cancel chrome, no form participation.
`<form-field>`	Generic input wrapper. Doesn't know about markdown.
`<chat-input>`	Single-line chat input with send. Different shape from a paragraph comment.

Basic usage

The component auto-creates the inner <markdown-editor> + <textarea> for you. If you need pre-existing markdown content, use the value attribute or provide your own <markdown-editor> child explicitly.

Edit mode

Pre-fill via value and add the Cancel button via data-show-cancel. Customize the Submit label.

Toolbar slot

Children with slot="toolbar" are moved into the toolbar row, on the left of the Submit / Cancel buttons.

The toolbar has role="toolbar". You wire the click handlers; the comment-box doesn't interpret them.

Length validation + counter

Set data-min-length and / or data-max-length. When data-max-length is set, a live counter is rendered next to the buttons.

Form participation

The component is form-associated via ElementInternals. Drop it inside any <form> with name set, and the markdown source submits like any other field.

Cancellable submit

The comment-box:submit event is cancellable. If you call preventDefault(), the value is preserved (useful when your network call fails and you want the user to retry without re-typing).

Keyboard

Key	Action
`Cmd/Ctrl` + `Enter`	Submit (matches GitHub / Slack convention).
`Tab`	Move from editor to toolbar buttons to Submit / Cancel.

Attributes

Attribute	Type	Default	Description
`name`	string	—	Form field name.
`value`	string	—	Pre-filled markdown content (e.g. for edit mode).
`placeholder`	string	—	Editor placeholder text.
`submit-label`	string	`Comment`	Submit button label.
`cancel-label`	string	`Cancel`	Cancel button label.
`data-show-cancel`	boolean	`false`	Render the Cancel button.
`data-min-length`	number	—	Validation: minimum character length.
`data-max-length`	number	—	Validation: maximum character length; also shows a live counter.
`required`	boolean	`false`	Marks the field required for form validation.
`disabled`	boolean	`false`	Disables the editor and buttons.

Events

Event	Bubbles	Detail
`comment-box:submit`	yes (cancellable)	`{ value }`
`comment-box:cancel`	yes	`{ value }`
`comment-box:input`	yes	`{ value, length }`

JavaScript API

Member	Description
`value`	Get / set the current markdown content.
`clear()`	Clear the value and emit `comment-box:input`.
`focus()`	Focus the inner editor.
`form / validity / checkValidity()`	Standard form-associated members.

Welcome to Vanilla Breeze