Draft

A draft is an early preliminary version of content such as an article, email, report, blog post, or document. The component wraps in-progress content so that authoring tools, reviewers, and downstream renderers can recognise it as not-yet-final and treat it accordingly (e.g., hide from public listings, render with a "Draft" badge, exclude from search, allow inline editing).

This headless component renders a <div> with class draft. The consumer supplies the draft content as children. The component does not own save state, autosave, or revision history.

Props

• label: string (optional) -- accessible label for the draft
• status: string (optional) -- editorial state, exposed as data-status for consumer CSS/JS
• children: slot (required) -- draft content
• ...restProps: Any additional HTML attributes

ARIA

• aria-label -- describes the draft for screen readers when no visible heading is present

When to Use

• Use to wrap in-progress content in an authoring or CMS context so downstream code can detect and treat draft state distinctly.
• Use to flag a section as preliminary so reviewers know it is open for comment or revision.
• Use to gate rendering of unfinished material in public listings, RSS feeds, or search indexes.

Related components

• question — a question is anything that asks for information, invites a response, tests knowledge, etc.
• answer — an answer is anything that responds to a question, request, action, etc.
• comment — a comment is anything that expresses an opinion, observation, explanation, etc.
• editable — an inline-editable text element that toggles between view and edit modes
• editable-form — a form wrapper for inline editing of content