Expand Panel · CropWatch UI

CwExpandPanel

Collapsible panel with an animated expand and collapse. The header is a native button with aria-expanded and aria-controls, and collapsed content can't be tabbed into. Supports custom headers, bindable state and a disabled mode.

Basic

Configure thresholds, calibration offsets, and reporting intervals for each connected sensor.

Define rules that trigger notifications when sensor readings exceed configured thresholds.

Export historical sensor data as CSV or JSON for offline analysis.

<CwExpandPanel title="Sensor configuration" open>
	<p>Configure thresholds and reporting intervals.</p>
</CwExpandPanel>

Controlled (bind:open)

Panel is open

This panel's state is bound to a parent variable and can be toggled externally.

onToggle callback

The readout below updates when you open or close this panel.

Last event: none yet

Custom header snippet

The header slot receives the open boolean so you can render dynamic content.

Disabled

You should never see this content.

API

Usage and API reference

CwExpandPanel is a collapsible section for settings, troubleshooting details, and optional content. Use the built-in title for simple cases and the `header` snippet when the trigger needs richer status UI.

How to think about it

Use the title prop for the common case If the header is just text, keep it simple and pass `title`.
Bind `open` when the parent needs control `bind:open` lets an external button or saved preference control the panel state.
Use the header snippet for status-rich toggles The snippet receives the current `open` boolean so you can render live labels or counts.

Props and callbacks

API	Type	Details
`title` Default: `''`	`string`	Simple header text.
`open` Default: `false`	`boolean`	Expanded or collapsed state.
`disabled` Default: `false`	`boolean`	Prevents toggling.
`header`	`Snippet<[boolean]>`	Custom header snippet receiving the current `open` state.
`children`	`Snippet`	Panel body content.
`onToggle`	`(open: boolean) => void`	Runs after the panel is toggled.

Copy-paste examples

Each snippet is a complete, working example you can paste into a Svelte 5 component.

Simple expandable section

Use this for FAQs, advanced settings, and details panels.

<CwExpandPanel title="Sensor configuration" open>
	<p>Configure thresholds, calibration offsets, and reporting intervals.</p>
</CwExpandPanel>

Controlled panel with custom header

Bind the state when other controls need to open or close the panel.

<script lang="ts">
	let expanded = $state(false);
	let lastToggle = $state('Never');
</script>

<CwButton variant="secondary" onclick={() => (expanded = !expanded)}>
	Toggle panel externally
</CwButton>

<CwExpandPanel bind:open={expanded} onToggle={(open) => (lastToggle = open ? 'Opened' : 'Closed')}>
	{#snippet header(open)}
		<div style="display:flex;gap:0.5rem;align-items:center">
			<strong>Irrigation controller</strong>
			<span>{open ? 'Expanded' : 'Collapsed'}</span>
		</div>
	{/snippet}
	<p>Last toggle: {lastToggle}</p>
</CwExpandPanel>