Skip to content

Fix broken markup in interfaces guide #741

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bryantgillespie merged 1 commit into from
Jun 15, 2026
Merged

Fix broken markup in interfaces guide #741

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 57 additions & 37 deletions content/guides/01.data-model/3.interfaces.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,45 +296,65 @@ Nested tree of checkboxes that can be expanded or collapsed.

::callout{icon="i-lucide-info"}
**Understanding Value Combining Options**

In a Checkboxes (Tree) interface, checkboxes can exist within a parent checkbox. Value combining determines the final value when selecting items in a tree.

- `All` returns all checked values.
:::collapsible{name="examples" class="mt-2"}
| Selection | Final Value |
| ------------------------------------------------------------------------------------------------------------------------ | -------------------------- |
| :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[child1]` |
| :icon{name="material-symbols:check-box"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box"} `child2` | `[child1, child2, parent]` |
:::
- `Branch` returns the top-most values that are selected.
:::collapsible{name="examples" class="mt-2"}
| Selection | Final Value |
| ------------------------------------------------------------------------------------------------------------------------ | ----------- |
| :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[child1]` |
| :icon{name="material-symbols:check-box"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box"} `child2` | `[parent]` |
:::
- `Leaf` returns the deepest values that are selected
:::collapsible{name="examples" class="mt-2"}
| Selection | Final Value |
| ------------------------------------------------------------------------------------------------------------------------ | ------------------ |
| :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[child1]` |
| :icon{name="material-symbols:check-box"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box"} `child2` | `[child1, child2]` |
:::
- `Indeterminate` returns checked items, and always returns a parent when one or more children are selected.
:::collapsible{name="examples" class="mt-2"}
| Selection | Final Value |
| ------------------------------------------------------------------------------------------------------------------------ | -------------------------- |
| :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[child1, parent]` |
| :icon{name="material-symbols:check-box"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box"} `child2` | `[child1, child2, parent]` |
:::
- `Exclusive` returns either the parent or child elements, but not both.
:::collapsible{name="examples" class="mt-2"}
| Selection | Final Value |
| ------------------------------------------------------------------------------------------------------------------------ | ------------------ |
| :icon{name="material-symbols:check-box"} `parent`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[parent]` |
| :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[child1]` |
| :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box"} `child2` | `[child1, child2]` |
:::
::
**`All`** returns all checked values.

:::collapsible{name="examples" class="mt-2"}

| Selection | Final Value |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
| :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[child1]` |
| :icon{name="material-symbols:check-box"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box"} `child2` | `[child1, child2, parent]` |

:::

**`Branch`** returns the top-most values that are selected.

:::collapsible{name="examples" class="mt-2"}

| Selection | Final Value |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[child1]` |
| :icon{name="material-symbols:check-box"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box"} `child2` | `[parent]` |

:::

**`Leaf`** returns the deepest values that are selected.

:::collapsible{name="examples" class="mt-2"}

| Selection | Final Value |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[child1]` |
| :icon{name="material-symbols:check-box"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box"} `child2` | `[child1, child2]` |

:::

**`Indeterminate`** returns checked items, and always returns a parent when one or more children are selected.

:::collapsible{name="examples" class="mt-2"}

| Selection | Final Value |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
| :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[child1, parent]` |
| :icon{name="material-symbols:check-box"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box"} `child2` | `[child1, child2, parent]` |

:::

**`Exclusive`** returns either the parent or child elements, but not both.

:::collapsible{name="examples" class="mt-2"}

| Selection | Final Value |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| :icon{name="material-symbols:check-box"} `parent`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[parent]` |
| :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[child1]` |
| :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box"} `child2` | `[child1, child2]` |

:::
::

### Radio Buttons

Expand Down
Loading