Live region

Preview

Default (polite)
3 items selected
Assertive
Error: form validation failed

Usage

<cs-live-region>3 items selected</cs-live-region>

<!-- Assertive announcements -->
<cs-live-region assertive>Error: validation failed</cs-live-region>

Properties

assertiveboolean default: false

Whether the announcements should be made using assertive aria-live. Assertive announcements interrupt the user's action, so they should only be used when absolutely necessary.

hiddenboolean default: false

Determines whether to visually hide the contents of the children slot.

tag-nameLiveRegionProps.TagName

The tag name to use for the wrapper around the children slot.

Slots

default

Use the rendered content as the source for the announcement text. When the text content inside this slot changes, it will be re-announced to assistive technologies.