Example: Task Form Layout Using Standard Components

[IgorShevchik]

Overview

Create a demo layout that replicates a Bitrix24-style task form using standard components only. The goal is to demonstrate how out-of-the-box components can be composed into a real-world UI with minimal custom styling.

Reference

The layout is based on the following task form design:

• Task title — editable heading at the top
• Rich text editor — description area with a formatting toolbar (attachments, mentions, lists, numbered lists, more options, and an expand button)
• Responsible persons block — a card containing:
  • Creator (Постановщик)
  • Assignee (Исполнитель)
  • Deadline with date/time (Крайний срок)
• Watchers block — a separate card listing observers (Наблюдатели)
• Action buttons row — a wrap row of icon+label buttons for additional sections:
  • Results, Files, Checklists, Project, Co-executors, Observers, Flow, Tags, Reminders, CRM Elements, Parent task, Subtasks, Linked tasks, Gantt, Timeline planning, Time tracking, Custom fields

Requirements

• Responsive — layout must adapt to different screen widths (mobile, tablet, desktop)
• Minimum custom styling — rely on component defaults; avoid overriding design tokens or adding bespoke CSS where a standard prop suffices
• Standard components only — use only components available in b24ui; no third-party UI libraries

Goal

Serve as a reference example showing how standard b24ui components can be assembled into a non-trivial, production-like form layout without heavy customisation.

Acceptance Criteria

• Task title is rendered as an editable/display heading
• Text editor area with toolbar icons is present
• Responsible persons block groups Creator, Assignee, and Deadline in one card
• Watchers block is a separate card
• Action buttons wrap correctly on narrow screens
• No significant inline styles or custom CSS classes beyond component props
• Works on mobile, tablet, and desktop viewports

[IgorShevchik]

For reference / history: a related record-edit form section example (a similar "compose standard components into a real-world form" exercise) was merged in #49 and is now in the docs:

https://bitrix24.github.io/b24ui/docs/components/form#record-edit-section

---

Generated by Claude Code

[IgorShevchik]

🎉 Done and merged in #47!

The task form is now living in the Form component docs under "Task form layout" — assembled entirely from standard b24ui building blocks, zero custom CSS.

---

What got built

Block	Components used
Task title	B24Input size="xl" no-border
Description	B24Editor + B24EditorToolbar (mention, bullet list, numbered list)
Responsible persons	B24Card + B24Avatar + B24InputDate + B24Popover + B24Calendar
Watchers	B24Card with header slot + B24Avatar
Action sections	B24Button with active/inactive color states + aria-pressed
Footer	B24Button air-primary (Save) + B24Button air-tertiary (Cancel)

---

Try it yourself

<B24Input v-model="title" placeholder="Task name" size="xl" no-border />

<B24Editor v-model="description" content-type="markdown" placeholder="Add a task description...">
  <template #default="{ editor }">
    <div class="flex items-center gap-1 px-2 py-1.5 border-b border-(--ui-color-divider-default)">
      <B24EditorToolbar :editor="editor" :items="toolbarItems" />
    </div>
  </template>
</B24Editor>

Key trick — deadline date picker is a B24Calendar inside a B24Popover anchored to B24InputDate's trailing slot, so the field and the popup share the same v-model:

<B24InputDate ref="deadlineInput" v-model="deadline" size="sm" no-border>
  <template #trailing>
    <B24Popover :reference="deadlineInput?.inputsRef[3]?.$el">
      <B24Button :icon="CalendarIcon" color="air-tertiary-no-accent" size="sm" />
      <template #content>
        <B24Calendar v-model="deadline" class="p-2" />
      </template>
    </B24Popover>
  </template>
</B24InputDate>

💡 Prompt to generate the whole form in one shot:
"Build a Bitrix24-style task form using standard b24ui components."
(The ::prompt block in the docs has a one-click Copy / Cursor / Windsurf button.)

---

Thanks for the detailed spec — the reference screenshot made the acceptance criteria crystal clear. 🙏

---

Generated by Claude Code