Comment box component status
Comment box is an experimental component that allows users to write and preview comments.
comment-box
17 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Comment box anatomy
Comment box consists of a heading, a tab nav, a toolbar, and a textarea with placeholder text.
Comment box heading requirement
A heading is required and is shown above the comment box to establish context and inform users about the purpose of the textarea. The default heading is 'Add a comment'.
Comment box heading terminology to avoid
Do not use the term 'Write' in the comment box heading. This may create confusion when navigating between the comment box's heading and the 'Write/Preview' tab nav.
Comment box heading visibility
It is recommended to always show a heading to give users a permanent description of the comment box. If the design does not have room for a heading, the sr-only class may be added to visually hide the heading while keeping it available to screen readers.
Comment box heading visual hiding best practice
When the heading needs to be visually hidden, use placeholder text instead. Do not visually hide the heading and remove the placeholder text.
Comment box placeholder text
Placeholder text is optional and is meant to give users additional hints. It disappears as soon as users start typing. By default a comment box has no placeholder text, but it can help suggest features specific to an implementation, such as slash commands, and can improve usability.
Comment box placeholder text best practice
Use different placeholder text depending on context. Do not repeat the heading also as placeholder text.
Comment box write mode
In write mode, the entered text is rendered as plain text. The toolbar is visible in this mode.
Comment box preview mode
In preview mode, the toolbar disappears and the text is rendered as HTML. Markdown formatting, autolinking and other features are supported.
Comment box tab nav
A tab nav is used to toggle between write and preview mode.
Comment box toolbar features
The toolbar provides shortcuts to: format Markdown, @-mention users or reference issues and pull requests, insert saved replies, and attach images and files.
Comment box toolbar customization
Additional toolbar items can be added based on context. They appear at the beginning of the toolbar separated with a divider.
Comment box textarea default height
The default and minimum height of the textarea is 100px. The textarea automatically resizes to fit the content until a certain max height is reached. The textarea can also be manually resized by dragging the handle in the bottom right corner.
Comment box textarea height options
Comment box textarea can be configured with three height options: small (default) at 100px, medium at 300px, and large at 500px.
Comment box messages
A banner message is used to inform users about events related to the comment box, including error or warning messages, uploading state, or successful actions. The banner is shown underneath the comment box.
Comment box typical usage pattern
A typical use of the comment box is at the bottom of a timeline or inline when replying to existing comments. Most often there is a cancel and a submit button at the bottom right of the comment box. Pro tips can also be shown to educate users and help feature discovery.