docs / patterns / disclosure-row

DisclosureRow

a row that expands to reveal a panel beneath it. the whole row is the button, so there is no small chevron to hunt for.

intensity · structuresrsc · client

provenance

shaped from sisu-plus

layer

core / patterns

intensity

structures · organizes a region, stays out of the content

composition

a ProgressRow as the summary, the sisu pattern it was extracted fromstack a few and control open when only one should stay expandedno links or buttons inside the summary, the whole row is already a buttonnot for content that must stay reachable while closed, the panel goes inert

a11y

the row is a button with aria-expanded and aria-controls · the closed panel carries inert so nothing inside is focusablejest-axe
live demo · try it out
  • Introduction to Software Engineering, 5 cr
  • Data Structures and Algorithms, 5 cr
  • Operating Systems, 5 cr
customize
summarythe row itself, here plain text
railColordraw the categorical left rail
railColorany css color for the rail
defaultOpenstart expanded when uncontrolled
disabledthe row stops toggling
usagecopy
import { DisclosureRow } from "@usva-ui/react/patterns/disclosure-row";

<DisclosureRow
  summary="Core studies"
  railColor="#52c989"
>
  <CourseList />
</DisclosureRow>

props

proptypedefaultnotes
summaryReact.ReactNode—the row itself. a title, a ProgressRow, whatever the panel is about.
childrenReact.ReactNode—the panel. stays mounted while closed so the height can transition.
asideReact.ReactNode—trailing content inside the button. counts, badges, figures.
railColorstring—any CSS color for the left rail. omit it and no rail draws.
openboolean—controlled. leave it out to let the row manage itself.
defaultOpenbooleanfalsestarting state when uncontrolled.
onOpenChange(open: boolean) => void—fires on every click, controlled or not.
disabledbooleanfalsethe row stops toggling.
buttonLabelstring—names the button when the summary is not plain text.

get it

bun add @usva-ui/reactcopy
usagecopy
import { DisclosureRow } from "@usva-ui/react/patterns/disclosure-row";
import { ProgressRow } from "@usva-ui/react/patterns/progress-row";

<DisclosureRow
  railColor="#52c989"
  summary={<ProgressRow label="Core studies" value={45} max={60} unit="cr" />}
  buttonLabel="Core studies"
>
  <CourseList />
</DisclosureRow>