---
title: Accordion
url: "https://native-sdk.dev/docs/components/accordion"
docs_index: /llms.txt
lastUpdated: 2026-10-16
---

> For an index of all documentation, see [/llms.txt](/llms.txt).

Use `accordion` to show or hide a section of content. `text` supplies the header label, `selected` controls whether the children are visible, and pressing the header dispatches `on-toggle`. Store the open state in the model. The item adjusts its height when opened or closed.

## Markup

```html
<column width="380">
  <accordion text="Is it accessible?" selected="{faq_open}" on-toggle="toggle_faq">
    <column>
      <text wrap="true" foreground="text_muted">Yes. Widgets carry semantic roles and one roving focus set.</text>
    </column>
  </accordion>
  <accordion text="Is it styled?" on-toggle="toggle_styling" />
</column>
```

Store a boolean in the model and toggle it in `update`:

```ts
// model: { readonly faq_open: boolean }
case "toggle_faq":
  return { ...model, faq_open: !model.faq_open };
```

```zig
// model: faq_open: bool = false,
.toggle_faq => model.faq_open = !model.faq_open,
```

A one-open-at-a-time group is a model decision: store the open item's id and compute each item's `selected` from an equality, flipping it in `update`.

## Programmatic construction (Zig)

In a Zig view, the `canvas.Ui` builder constructs the same tree programmatically:

```zig
ui.column(.{ .width = 380 }, .{
    ui.el(.accordion, .{
        .text = "Is it accessible?",
        .selected = model.faq_open,
        .on_toggle = .toggle_faq,
    }, .{
        ui.column(.{}, .{
            ui.text(.{ .wrap = true, .style_tokens = .{ .foreground = .text_muted } }, "Yes. Widgets carry semantic roles and one roving focus set."),
        }),
    }),
    ui.el(.accordion, .{ .text = "Is it styled?", .on_toggle = .toggle_styling }, .{}),
})
```

## Attributes

| Attribute   | Description                                                                                                                          |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `text`      | Text value for text-bearing elements; a literal or one \{binding}.                                                                   |
| `selected`  | Selected state; often a \{a == b} equality.                                                                                          |
| `on-toggle` | Dispatch a Msg on toggle: tag or tag:\{payload}. Hit-target elements only (checkbox, toggle, toggle-button, switch, accordion, ...). |
| `height`    | Definite height (plain number): the element is exactly this tall; content neither shrinks nor overflows it.                          |

---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)