> For the complete documentation index, see [llms.txt](https://docs.devolutions.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devolutions.net/powershell-universal/apps/components.md).

# Components

Explore the PowerShell Universal component library, including accessibility, data display, visualization, inputs, navigation, layout, and event handlers.

A Universal app is composed of components. When building an app, call PowerShell cmdlets within the app script to create components.

```powershell
New-UDApp -Title 'Dashboard' -Content {
    New-UDTypography -Text 'Hello, world!'
}
```

## Component types

There are more than 50 components that you can use in apps. Common categories include data display, data visualization, feedback, inputs, navigation, layout, utilities, and surfaces.

* **Data display**: alerts, tables, and timelines.
* **Data visualization**: charts and maps.
* **Feedback**: modals and progress indicators.
* **Inputs**: buttons, forms, textboxes, and switches.
* **Navigation**: menus, steppers, and tabs.
* **Layout**: grids and stacks.
* **Utilities**: dynamic, element, and HTML components.
* **Surfaces**: cards and expansion panels.

## Accessibility and ARIA attributes

Use the shared `-Aria` parameter to add ARIA attributes to supported interactive components. The parameter accepts a script block containing one or more `New-UDAriaAttribute` commands. PowerShell Universal applies the resulting attributes to the interactive or input element.

```powershell
New-UDTextbox -Id 'HardWords' -Label 'Nougat Croissant Valet' -Aria {
    New-UDAriaAttribute -Label -Value 'noo-gah Krwah-sahn val-ay'
    New-UDAriaAttribute -LabelledBy -Value 'hardWordsLabel'
}
```

This example renders `aria-label="noo-gah Krwah-sahn val-ay"` and `aria-labelledby="hardWordsLabel"` on the textbox input. Use ARIA attributes to provide an accessible name, connect instructions and error text, and express the control state when its visible content does not already do so.

### Supported attributes

`New-UDAriaAttribute` supports the following helpers:

| Helper                        | Rendered attribute |
| ----------------------------- | ------------------ |
| `-Label`                      | `aria-label`       |
| `-LabelledBy` or `-LabeledBy` | `aria-labelledby`  |
| `-DescribedBy`                | `aria-describedby` |
| `-Description`                | `aria-description` |
| `-Controls`                   | `aria-controls`    |
| `-Expanded`                   | `aria-expanded`    |
| `-HasPopup`                   | `aria-haspopup`    |
| `-Hidden`                     | `aria-hidden`      |
| `-Invalid`                    | `aria-invalid`     |
| `-Required`                   | `aria-required`    |
| `-Role`                       | `role`             |

Use valid values for the ARIA attribute you select. Prefer native labels and semantics when they are sufficient; ARIA supplements them and should not replace visible labels or standard form behavior.

### Supported components

The following components support `-Aria`:

* `New-UDAutocomplete`
* `New-UDButton` and `New-UDIconButton`
* `New-UDCheckbox`
* `New-UDSelect`
* `New-UDRadioGroup` and `New-UDRadio`
* `New-UDSwitch`
* `New-UDSlider`
* `New-UDLink`
* `New-UDDatePicker` and `New-UDTimePicker`
* `New-UDRating`
* `New-UDFloatingActionButton`
* `New-UDUpload`
* `New-UDToggleButtonGroup` and `New-UDToggleButton`
* `New-UDTextbox`

For textboxes, explicit values in `-Attributes` take precedence when the same attribute is also defined through `-Aria`.

## Event handlers

Many components provide event handlers for interactive functionality such as clicks, validation, and rendering. Event handlers use PowerShell script blocks.

```powershell
New-UDButton -Text 'Click me!' -OnClick {
    Show-UDToast -Message 'Clicked!'
}
```

Within event handlers, you can run any valid PowerShell command, including commands from modules outside PowerShell Universal such as ActiveDirectory or Microsoft.Graph.

### Event data

Event handlers can provide data as `$EventData`. The value depends on the component: a textbox change returns its value, while a form submission returns an object with the form values.

```powershell
New-UDTextbox -OnChange {
    Show-UDToast -Message $EventData
}

New-UDForm -Content {
    New-UDTextbox -Id 'UserName'
} -OnSubmit {
    Show-UDToast -Message $EventData.UserName
}
```

Use `$Body` when you need the raw JSON string provided to the event handler. Some controls also provide `$PSUItem` with the item ID, type, event ID, event name, event data, and location.

### Scoping

PowerShell Universal makes in-scope variables available to event handlers, but every handler runs in its own runspace. Do not rely on `$Global:` or `$Script:` scope to share state between handlers; use custom scopes instead.

Avoid inheriting `$EventData` in nested event handlers because the nested handler replaces it. Store the required outer value in a variable before creating the nested component.

```powershell
New-UDTable -Columns @(
    New-UDTableColumn -Property 'Name' -OnRender {
        $Name = $EventData.Name
        New-UDButton -Text $Name -OnClick {
            Show-UDToast -Message $Name
        }
    }
) -Data $Data
```

#### See also

* [Devolutions Academy - Adding data tables](https://academy.devolutions.net/student/page/3466031-adding-data-tables?curriculum_activity_id=5612258\&path_id=3465905\&sid=1b852f65-706e-452f-a2b6-96b76149ddb2\&sid_i=0)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.devolutions.net/powershell-universal/apps/components.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.