revido kit
Start building
← All components
layout / stable

RecordSection

Collapsible RecordDrawer list or rail group with count, independent add action, and placement-based emptiness; empty lists start collapsed.

LIVE PREVIEW
Loading preview…

When to use

  • Record child lists: always pass count, including zero, and use addAction for creation.
  • Property rail groups: placement rail supplies compact gutters; omit count for groups of fields.

Consider an alternative

  • Switching views — use Tabs.
  • Standalone groups outside a record — use Disclosure.

Import

import { RecordSection } from '@revido-llc/kit';

Keyboard interaction

  • Enter / Space — toggle the heading or activate an independent add button
  • Tab — move between the heading and actions

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.

children (required)ReactNode—Content stays mounted while collapsed, preserving draft edits.
title (required)ReactNode—
actionsReactNode—Independent header actions; pressing them never toggles the panel.
addActionDisclosureAddAction—Icon add action in the header; also the EmptyState button when empty.
classNamestring—
countnumber—
defaultExpandedboolean—Defaults to open without a count, otherwise count > 0. Explicit values always win.
emptyIconLucideIcon—Icon for the compact count-zero EmptyState. Defaults to Inbox.
emptyStateReactNode—Compact count-zero message. Defaults to "No {title} yet"; null suppresses it for an inline draft.
headerActionsReactNode—Extra independent header controls, alongside the standard list add action.
idstring—
isExpandedboolean—
onExpandedChange((expanded: boolean) => void)—
placement"main" | "rail""main"

Examples

List with count and add

<RecordSection title="Tasks" count={tasks.length} addAction={{ label: "Add task", onPress: addTask }}>{taskList}</RecordSection>

Collapsed empty default

<RecordSection title="Tasks" count={0} emptyIcon={ListChecks} emptyState="No tasks yet" addAction={{ label: "Add task", onPress: addTask }}>{null}</RecordSection>

Expanded empty main

Main placement stacks a centered compact icon, title and secondary action.

<RecordSection title="Tasks" count={0} defaultExpanded addAction={{ label: "Add task", onPress: addTask }}>{null}</RecordSection>

Expanded empty rail

Rail placement keeps one muted line and only the header add action.

<RecordSection placement="rail" title="Tasks" count={0} defaultExpanded addAction={{ label: "Add task", onPress: addTask }}>{null}</RecordSection>

Disabled creation with reason

<RecordSection title="Evidence" count={0} addAction={{ label: "Add evidence", onPress: addEvidence, isDisabled: !canAdd, disabledReason: "Only QA can add evidence." }}>{null}</RecordSection>

Related components