revido kit
Start building
← All components
layout / stable

Disclosure

Collapsible record section with a count chip, independent add and header actions, and placement-based emptiness; empty lists start collapsed.

LIVE PREVIEW
Loading preview…

When to use

  • Child lists: pass count including zero and addAction for creation.
  • Compact groups in a record's property rail; omit count for groups of fields.

Consider an alternative

  • Switching sibling views — use Tabs.
  • A single field label — use PropertyField.

Import

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

Keyboard interaction

  • Tab — focus the section trigger or an independent action
  • Enter / Space — expand or collapse the section; adding to an empty section opens its body

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.
density"default" | "compact""default"Main sections use default; property rail groups use compact.
emptyIconLucideIconInboxIcon 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)—

Examples

Literal content

A portable section with a literal count; bind creation actions in the consuming app.

<Disclosure title="Tasks" count={3}>Three tasks ready for review.</Disclosure>

List with count and add

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

Collapsed empty default

<Disclosure title="Dependencies" count={0} emptyIcon={Link2} emptyState="No dependencies yet" addAction={{ label: "Add dependency", onPress: openDependencyPicker }}>{null}</Disclosure>

Disabled add with reason

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

Expanded empty main

Default density stacks the compact icon, title and secondary action.

<Disclosure title="Bugs" count={0} defaultExpanded addAction={{ label: "Add bug", onPress: addBug }}>{null}</Disclosure>

Expanded empty rail

Compact density keeps the rail's muted inline message.

<Disclosure title="Links" count={0} defaultExpanded density="compact" addAction={{ label: "Add link", onPress: addLink }}>{null}</Disclosure>

Related components