CommentForm
Writes a Markdown comment with a preview, checks it is not empty, and shows posting, posted and failed states. Pick it under a comment thread or to edit a comment.
- CommentForm
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, CommentForm
Dark theme, CommentForm
High contrast theme, CommentForm
UsageLink to the section Usage
import { CommentForm } from '@skribly/ui/conversation'<CommentForm
label="Add a comment"
writeLabel="Write"
previewLabel="Preview"
emptyPreview="Nothing to preview yet."
submitLabel="Comment"
requiredMessage="Write a comment first."
successMessage="Comment posted."
failedMessage="Not posted. Try again."
onSubmit={(text) => api.comment(text)}
/>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- An empty post moves focus to the text area, sets aria-invalid and links the message with aria-describedby.
- Success is a polite status that stays until you type again; failure is an alert, read out at once, and the text is kept.
- Ctrl+Enter or Cmd+Enter posts from the text area.
This demo runs through axe in all three themes on every test run. See what the tests check.