Lynx/Modules/DaisyUI/CollapseAlso available onWebNative
@sigx/lynx-daisyui · Stable · Component library

Collapse#

A tap-to-toggle disclosure panel with arrow or plus indicators, plus a Collapse.Group that turns a set of panels into a single-open accordion.

Import#

TSX 
import { Collapse } from '@sigx/lynx-daisyui';

Overview#

Collapse hides its content behind a pressable title row. Used standalone it manages its own open state (seeded by defaultOpen), or you can bind it two-way with model. Wrap several panels in Collapse.Group and give each a value to get accordion behavior — only one panel is open at a time, with the group's open value itself two-way bindable.

Props#

Collapse#

PropTypeDefaultDescription
titlestring-Title-row text. Override with the title slot for custom content.
icon'arrow' | 'plus' | 'none''arrow'Indicator style. arrow rotates; plus toggles +/−; none hides it.
valuestring-Identity within a Collapse.Group (required for accordion membership).
defaultOpenbooleanfalseUncontrolled initial open state for standalone use.
modelModel<boolean>-Two-way binding for standalone open state (e.g. () => state.open). Inside a group, the group's state wins.
classstring-Additional CSS classes appended to the root.
SlotDescription
defaultThe panel body, shown while open.
titleCustom title-row content, replacing the title string.
EventTypeDescription
onToggle(open: boolean) => voidFired when the panel is toggled, with the next open state.

Collapse.Group#

PropTypeDefaultDescription
modelModel<string | undefined>-Two-way binding to the open item's value (or undefined for all-closed).
defaultValuestring-Seeds the open item in the uncontrolled case.
classstring-Additional CSS classes appended to the group.
SlotDescription
defaultThe child Collapse panels (each with a value).

Basic usage#

A standalone panel, expanded by default:

TSX 
import { component } from '@sigx/lynx';
import { Collapse, Text } from '@sigx/lynx-daisyui';

const Faq = component(() => () => (
  <Collapse title="What is Lynx?" defaultOpen>
    <Text>Lynx is a dual-thread mobile runtime. This panel starts expanded.</Text>
  </Collapse>
));

Indicators and model binding#

icon picks the indicator; model binds the open state to a signal:

TSX 
import { component, signal } from '@sigx/lynx';
import { Collapse, Col, Text } from '@sigx/lynx-daisyui';

const Bound = component(() => {
  const open = signal(false);
  return () => (
    <Col gap={8}>
      <Collapse title="Plus indicator" icon="plus">
        <Text>Tap the header to toggle.</Text>
      </Collapse>
      <Collapse title="Bound section" model={() => open.value}>
        <Text>This section's open state is a signal.</Text>
      </Collapse>
      <Text class="opacity-60">open: {open.value ? 'yes' : 'no'}</Text>
    </Col>
  );
});

Accordion group#

Wrap panels in Collapse.Group and give each a value — only one stays open at a time:

TSX 
import { component, signal } from '@sigx/lynx';
import { Collapse, Col, Text } from '@sigx/lynx-daisyui';

const Accordion = component(() => {
  const openItem = signal<string | undefined>('shipping');
  return () => (
    <Col gap={8}>
      <Collapse.Group model={() => openItem.value}>
        <Collapse value="shipping" title="Shipping">
          <Text>Ships in 2–3 business days.</Text>
        </Collapse>
        <Collapse value="returns" title="Returns">
          <Text>30-day return window.</Text>
        </Collapse>
        <Collapse value="warranty" title="Warranty">
          <Text>One-year limited warranty.</Text>
        </Collapse>
      </Collapse.Group>
      <Text class="opacity-60">open: {openItem.value || '—'}</Text>
    </Col>
  );
});