unstable_ErrorRegion API

Import

import { unstable_ErrorRegion as ErrorRegion } from "@stratakit/structures";
// OR
import * as ErrorRegion from "@stratakit/structures/unstable_ErrorRegion";

ErrorRegion.Root

Base element: <div>

A collapsible region that displays a list of error messages, which might originate from another component, such as Tree.

This component is rendered as a region landmark and should be labelled using aria-label or aria-labelledby.

This component should not be rendered conditionally, instead use the items prop to control the visibility.

Example:

<ErrorRegion.Root
  aria-label="Issues"
  label="3 issues found"
  items={[
    <ErrorRegion.Item key={…} message="…" />
    <ErrorRegion.Item key={…} message="…" />
    <ErrorRegion.Item key={…} message="…" />
  ]}
/>

items

Type: ReactNode[] | undefined (optional)

A list of error items where each item describes an individual error. Must be a list of ErrorRegion.Item components.

Set to undefined or empty array if you don’t want to display errors rather than conditionally rendering the component.

label

Type: ReactNode (optional)

Label for the error header, usually indicating the number of errors displayed.

Changes to the label prop will be communicated using a live region.

open

Type: boolean | undefined (optional)

The controlled open state of the region.

render

Type: (props: P) => React.ReactNode | React.ReactElement | undefined (optional)

Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.

Check out the Composition guide for more details.

setOpen

Type: ((open: boolean) => void) | undefined (optional)

Callback fired when the region is open.

Should be used with the open prop.

ErrorRegion.Item

Base element: <div>

An individual error item within the ErrorRegion component. It displays an error message and optional actions.

The messageId prop can be used to semantically associate the error item with the related UI item, such as a Tree.Item.

Example:

<ErrorRegion.Item
  message={<>Something went wrong with <Anchor href="item-10001">Item 10001</Anchor>.</>}
  messageId="item-10001-error"
  actions={<Button>Retry</Button>}
/>

<Tree.Item
  id="item-10001"
  label="Item 10001"
  error="item-10001-error"
/>

actions

Type: ReactNode (optional)

The actions available for this item. Must be a list of anchors, each rendered as a button using <Anchor render={<button />} />.

message

Type: ReactNode (optional)

The error message. Consumers might consider using Anchor component to link to the associated element in the UI.

messageId

Type: string | undefined (optional)

The id of the message node which can be used to semantically associate the error item with the related UI item i.e. Tree.Item.

Additional props

• render