Layout & display

Collapsible

One disclosure that owns nothing but itself: an advanced-options block, a long log line, a stack trace folded under an error. Accordion is the component for a set of these, because it decides which of its items is open. This decides nothing beyond itself.

Basic

The chevron points along the axis the content moves on: right while the block is closed, down once it is open. The panel stays mounted so the row can animate to the height of its own content, and it is inert while closed, so a keyboard user does not land on a control they cannot see.

Opened from outside

open is bindable, so the page and the trigger share one value. That is the reason this is not a native details element: details cannot be animated and cannot be driven from anywhere but its own summary, so a page that wants to open the block from a deep link, a search hit or a validation failure has no way in.

Icon and badge

The badge sits at the trailing edge of the trigger and takes a count or a status. It is text, so keep it to a word or a number.

panic: send on closed channel
  goroutine 41 [running]
  internal/queue.(*Worker).drain

Disabled

A disabled trigger drops its hover background rather than overriding it, because :hover still matches a disabled button and a second background utility would resolve by the order Tailwind emits it. The state change is guarded in the handler as well as on the element, since a click dispatched from script reaches the handler on a disabled button.

API