Section Toggle - HapplyUI

A toggleable section that expands to reveal content when a switch is activated.

Installation

bunx @happlyui/cli@latest add section-toggle

Dependencies

npm packages

framer-motion

Registry dependencies

These are automatically installed when you add this component.

happly-ui-utils
switch

Usage

import * as SectionToggle from "@/components/ui/section-toggle"

// Composed (recommended)
<SectionToggle.Composed
  title="Title"
  description="Description"
  open={open}
  onOpenChange={setOpen}
>
  {children}
</SectionToggle.Composed>

// Namespace
<SectionToggle.Root open={open}>
  <SectionToggle.Header open={open}>
    <SectionToggle.TextGroup>
      <SectionToggle.Title>Title</SectionToggle.Title>
      <SectionToggle.Description>Description</SectionToggle.Description>
    </SectionToggle.TextGroup>
    <Switch.Root variant="neutral" checked={open} onCheckedChange={setOpen} />
  </SectionToggle.Header>
  <SectionToggle.Content open={open}>{children}</SectionToggle.Content>
</SectionToggle.Root>

Examples

Composed

Simplified single-component API with built-in switch toggle.

Do you want to set a closing date for offers?

Set the end dates for when Offer will be accepted for the program.

Select a date

Select a time

<SectionToggle.Composed
  title="Set a deadline?"
  description="Offers close after this date."
  open={open}
  onOpenChange={setOpen}
>
  {children}
</SectionToggle.Composed>

Default (Expanded)

Section toggle in its expanded state using namespace pattern.

Do you want to set a closing date for offers?

Set the end dates for when Offer will be accepted for the program.

Select a date

Select a time

<SectionToggle.Root open={open}>
  <SectionToggle.Header open={open}>
    <SectionToggle.TextGroup>
      <SectionToggle.Title>Set a deadline?</SectionToggle.Title>
      <SectionToggle.Description>Description here.</SectionToggle.Description>
    </SectionToggle.TextGroup>
    <Switch.Root variant="neutral" checked={open} onCheckedChange={setOpen} />
  </SectionToggle.Header>
  <SectionToggle.Content open={open}>{children}</SectionToggle.Content>
</SectionToggle.Root>

Collapsed

Section toggle in its collapsed state.

Do you want to set a closing date for offers?

Set the end dates for when Offer will be accepted for the program.

<SectionToggle.Root open={open}>
  <SectionToggle.Header open={open}>
    <SectionToggle.TextGroup>
      <SectionToggle.Title>Limit offers?</SectionToggle.Title>
      <SectionToggle.Description>Description here.</SectionToggle.Description>
    </SectionToggle.TextGroup>
    <Switch.Root variant="neutral" checked={open} onCheckedChange={setOpen} />
  </SectionToggle.Header>
  <SectionToggle.Content open={open}>{children}</SectionToggle.Content>
</SectionToggle.Root>

API Reference

SectionToggle.Composed

Composed version — renders the full toggle section with built-in switch from props.

Prop	Type	Default	Description
`title`	`ReactNode`	-	The toggle section title
`description`	`ReactNode`	-	The toggle section description
`open`	`boolean`	`false`	Controls the expanded/collapsed state
`onOpenChange`	`(open: boolean) => void`	-	Callback when the switch is toggled
`contentClassName`	`string`	-	Additional classes for the content area

SectionToggle.Root

The outer container with subtle background, border, and rounded corners.

Prop	Type	Default	Description
`open`	`boolean`	`false`	Controls the visual state — white background when closed, gray when open
`className`	`string`	-	Additional classes for the root container

SectionToggle.Header

The header row containing text and the switch toggle.

Prop	Type	Default	Description
`open`	`boolean`	`false`	Adjusts header padding — uniform when closed, no bottom padding when open

SectionToggle.TextGroup

Groups the title and description together, filling available space.

Prop	Type	Default	Description

SectionToggle.Title

The toggle section title.

Prop	Type	Default	Description

SectionToggle.Description

The toggle section description.

Prop	Type	Default	Description

SectionToggle.Content

The collapsible content area with animated height transition via framer-motion.

Prop	Type	Default	Description
`open`	`boolean`	`false`	Controls visibility with animated expand/collapse transition