---
name: xios-views
description: Write XIOS views and applications (declarative XML - application, view, panel, components, process steps) with the Core components and their current API only. Use when creating or editing an XIOS application or view XML, choosing an XIOS component, or reviewing XIOS UI markup for legacy attributes.
---
# Writing XIOS views
An application holds documents (data), views (UI) and processes (behaviour). Use only the components in the index below (the Core components), and only what their files list: any other component is As-is (for existing apps only) and any other attribute legacy. The process (triggers, steps, operations, expressions) is the xios-process skill's; own components, xios-extend's; themes, xios-theme's.
Read the component files you will need in one go, at the start, together with the xios-process files.
```xml
Hello {#v1#nameField}
```
- `instances="0"`: no instance limit; ``: no splash. A resource ``'s first child is the document `#doc`.
- A view has one root ``; menus go directly in the view, before it. With several views, mark the first with `xlink:actuate="onLoad"`.
- Bind after `Loaded`, as above; a bound field writes the user's committed edit back.
- Most components take the actions set, show, hide, enable and disable, fire Show, Hide, Enabled and Disabled, and have the methods getValue and setValue.
- Data-driven components take `` children whose markup reads the matched node with `{@attr}`.
- Translations: `l:label="KEY"` (any attribute) with `xmlns:l="https://xios3.com/lang"`; keys in `/.xml`, listed in `dir`.
- Check a file with `node /validator/cli.js app.xml` (in the xios-core repository: `npm run validate -- app.xml`): at runtime few components warn about unknown attributes.
## Rules for every component
- Common attributes, not repeated in the component files: `name` (unique in the view; needed to bind, trigger or address it), `text`, `title`, `width`/`height` (px, %, `fill`), `margin`, `hide`, `enabled`, `class`, `style`, `placeholder`.
- Tab order is markup order; never `tabindex`. No `look`: the theme decides.
- Color only through `class`, or `style` with the token variables (`var(--xios-color-primary)`); no color attributes.
- Control heights (button, input, combobox, tabs) come from the theme: no `height` on them.
- Type: `class="xios-type-display"` (or `-heading`, `-subheading`, `-body`, `-caption`, `-label`, `-strong`); no `size`, `bold`, `font`. A heading is a label with `heading="1".."6"`, chosen by the outline.
- Name what a screen reader meets: `label` on every field and group of options (a rows, columns or flow parent panel draws it and ties it to the field), `title` on an icon-only button, `alt` on a meaningful image and an icon-only menu item.
- Field states (input, textarea, combobox, checkbox, radio): a process sets `action="error"`, `"warning"` or `"success"` and clears it with `"valid"`; the theme draws the border, and `error-message`/`warning-message`/`success-message` is read to screen readers only - show the text in a label too.
- Icons: `icon://name?look=lucide` for Lucide, `icon://name` for the theme's own set.
# Components
Read a component's file in `components/` before writing that component.
- `panel` - the layout container: rows, columns or flow, gap and padding, field labels, titled boxes and expanders -> [components/panel.md](components/panel.md)
- `group` - one choice shared by its children: radios, a segmented control of buttons, or one panel shown at a time -> [components/group.md](components/group.md)
- `tabstrip` - tabs, each showing one panel: static or made from data, closeable -> [components/tabstrip.md](components/tabstrip.md)
- `label` - read-only text: headings, captions, values from data, formatted dates, the type classes -> [components/label.md](components/label.md)
- `image` - a picture or an icon that is not a control -> [components/image.md](components/image.md)
- `qr` - a QR code of a text, a URL or a Wi-Fi network -> [components/qr.md](components/qr.md)
- `button` - an action: Select, a toggle, a menu opener, a busy spinner, the default button -> [components/button.md](components/button.md)
- `menu`, `item`, `divider`, `dataitem` - popup menus: opened from a button or as a context menu, submenus, checkable and radio items, dividers, items from data -> [components/menu.md](components/menu.md)
- `input` - a one-line field: text, password, number, date, time; validation -> [components/input.md](components/input.md)
- `textarea` - multi-line plain text -> [components/textarea.md](components/textarea.md)
- `checkbox` - a yes/no choice, confirmed later (a form option) -> [components/checkbox.md](components/checkbox.md)
- `toggle` - an on/off switch for a setting that applies at once -> [components/toggle.md](components/toggle.md)
- `radio` - one of a few visible options, in a group -> [components/radio.md](components/radio.md)
- `combobox`, `plate` - a choice from a dropdown list (its plate), or a field with suggestions -> [components/combobox.md](components/combobox.md)
- `colorpicker` - a color picker, with WCAG contrast lines -> [components/colorpicker.md](components/colorpicker.md)
- `upload` - file and folder uploads into a drive, with progress -> [components/upload.md](components/upload.md)
- `codeeditor` - a code, XML or JSON editor bound to a document -> [components/codeeditor.md](components/codeeditor.md)
- `list` - rows from a document, drawn by a rule: selection, filter, drag and drop -> [components/list.md](components/list.md)
- `table` - rows with columns: sort, filter, cell editing, pages, bands -> [components/table.md](components/table.md)
- `tree` - a hierarchy that opens and closes: children on demand, checkboxes, the path -> [components/tree.md](components/tree.md)
- `app` - another application embedded in a view -> [components/app.md](components/app.md)