Collapsible

<oblyx-collapsible> is a single labeled disclosure region built on the native <details>/<summary> elements. trigger is the always-visible header text; the collapsible body is the element's own light content.

Basic collapsible

A light-DOM web component library with a generated Kotlin/Ktor builder API.

HTML

Kotlin

<oblyx-collapsible trigger="What is Oblyx?">
  A light-DOM web component library with a generated Kotlin/Ktor builder API.
</oblyx-collapsible>

oblyxCollapsible(trigger = "What is Oblyx?") {
  +"A light-DOM web component library with a generated Kotlin/Ktor builder API."
}

Open by default

open defaults to true, not false: an <oblyx-collapsible> with no open attribute at all starts open. This is deliberate, not an inconsistency with the more common accordion mental model of starting closed. To start one closed, set open="false" explicitly; that works because open uses a converter shared with other Oblyx booleans that default to true, where bare presence and the string "true" both mean on, but the literal string "false" is read back as a real off, giving a server-rendered attribute a way to express the explicit-off case that a defaulted-true boolean would otherwise have no syntax for.

Default open state

No open attribute at all. Still open.

open="false" is the explicit off case.

HTML

Kotlin

<oblyx-collapsible trigger="Starts open (the default)">
  No open attribute at all. Still open.
</oblyx-collapsible>
<oblyx-collapsible trigger="Starts closed" open="false">
  open="false" is the explicit off case.
</oblyx-collapsible>

oblyxCollapsible(trigger = "Starts open (the default)") {
  +"No open attribute at all. Still open."
}
oblyxCollapsible(trigger = "Starts closed", open = false) {
  +"open=\"false\" is the explicit off case."
}

Grouping

There is no oblyx-collapsible-group element, and none is planned. Grouping is the native name attribute on the underlying <details>, exposed here as group: two or more <oblyx-collapsible> elements that share a group value form one mutually exclusive set, resolved entirely by the browser, the same way radio buttons sharing a name are mutually exclusive with no coordinating JavaScript. Opening one closes whichever sibling in the group was open; omit group for independent items that can all be open at once, such as a plain FAQ list.

Grouped collapsibles

Orders ship within two business days.

Returns are accepted within thirty days.

Covered for one year from purchase.

HTML

Kotlin

<oblyx-collapsible trigger="Shipping" group="faq">
  Orders ship within two business days.
</oblyx-collapsible>
<oblyx-collapsible trigger="Returns" group="faq" open="false">
  Returns are accepted within thirty days.
</oblyx-collapsible>
<oblyx-collapsible trigger="Warranty" group="faq" open="false">
  Covered for one year from purchase.
</oblyx-collapsible>

oblyxCollapsible(trigger = "Shipping", group = "faq") {
  +"Orders ship within two business days."
}
oblyxCollapsible(trigger = "Returns", group = "faq", open = false) {
  +"Returns are accepted within thirty days."
}
oblyxCollapsible(trigger = "Warranty", group = "faq", open = false) {
  +"Covered for one year from purchase."
}

Disabled

<details>/<summary> has no native disabled state, so disabled is ported as aria-disabled plus a click guard plus tabindex="-1" on the trigger, rather than a native disabled attribute that would not exist on the underlying element.

Disabled collapsible

You cannot expand or collapse this right now.

HTML

Kotlin

<oblyx-collapsible trigger="Locked while an order is processing" disabled>
  You cannot expand or collapse this right now.
</oblyx-collapsible>

oblyxCollapsible(trigger = "Locked while an order is processing", disabled = true) {
  +"You cannot expand or collapse this right now."
}

Reference

`<oblyx-collapsible>`

Attribute	Type	Default	Description
`trigger`	`string \| undefined`	–	Always-visible header text. Required for an accessible name; omitting it is a defect and is flagged loudly rather than silently producing an unlabeled disclosure trigger. Plain text only, not rich content.
`group`	`string \| undefined`	–	Forwarded verbatim to the internal `<details name>`. Two or more `oblyx-collapsible` elements sharing this value form one native accordion group with mutual exclusion, no `oblyx-collapsible-group` element and no JavaScript coordinator. Omit for independent, multiple-open items (an FAQ list), which is already the default with no group value set.
`open`	`boolean`	`true`	Initial and current open state. Defaults to open, not closed. Uses a converter that keeps bare presence and "true" both meaning true, but treats the literal string "false" as a real false, so a server-rendered `open="false"` can express the explicit off case. The native `toggle` event, not this property directly, is what actually drives state changes.
`disabled`	`boolean`	`false`	Non-interactive trigger. Uses `aria-disabled` plus a click guard plus `tabindex="-1"`, never the native `disabled` attribute, since `<details>`/`<summary>` has no native disabled state to forward to.

Events

Event	Type	Description
`toggle`	`Event`	Fired whenever the open state changes, whether triggered by user interaction or by setting the open property directly. Mirrors the native details element's own toggle event.