Overview

labb components handle many interactions without JavaScript. Menus, modals, tabs, and accordions use daisyUI’s CSS.

Use labb’s reactive tools when the page needs shared state, live validation, or a server update. They build on Datastar. You can use them without learning Datastar, or use its lower-level attributes when you need them.

The c-lbr. components declare signals and trigger actions. Signals hold the named browser state that these components read and update.

Choose the right tool

Start with these questions.

1. Does a daisyUI or labb component already provide the interaction? Use it as-is for menus, modals, tabs, and accordions.
2. Does the interaction need browser state? Use signals and data- attributes for client-only behaviour such as a toggle or value that follows the pointer.
3. Does the server need to validate, save, search, or paginate? Use a server action.

Both approaches use the same signals. A search field can update client-side feedback as the user types, then request new results from Django.

Server actions use ordinary views

A server action calls an ordinary Django view, which returns the whole page. Datastar compares that response with the current DOM and updates the changed parts. Read browser state from request.signals, render the normal template, and keep the view usable for a first load too.

Load the runtime only where you need it

A page using only c-lb. components does not load a reactive runtime. <c-lb.m.dependencies> does not add one on its own.

The runtime loads when a page uses one of these features.

• a <c-lbr.signals> declaration,
• any c-lbr. action (get, post, delete),
• a reactive $-prop on a plain component, such as variant="$status:neutral",
• a reactive chart with data="$signal".

The first reactive feature loads the runtime. labb de-duplicates it, so the page loads it once.

Hand-written data- markup cannot trigger the runtime by itself. Add the datastar flag when the page uses those attributes without a reactive labb component.

<c-lb.m.dependencies datastar />

Use this only for raw Datastar attributes on ordinary elements. A c-lbr. component or reactive $ prop already loads the runtime.

In this section