CropWatch User Interface

CwExpandPanel

Collapsible panel with animated expand / collapse. Supports custom headers, bindable state, and disabled mode.

Basic

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

<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

Last toggle: —

Custom header snippet

Disabled

Documentation Upgrade

Start here

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

These snippets intentionally show the full public API surface the live demo relies on.

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>