Inspector

Modeless details

Use open to control visibility. Supplying onClose adds a Close action. The component does not move focus when opened and does not trap it. The caller closes the inspector and restores focus to the originating control, or a useful list fallback if that control no longer exists. See the Asset Management recipe.

Use EntityPreview for the selected record's identity, facts, condition, and source quality. Its labels sit on the left and values align on the right. Use DescriptionList with layout="details" for smaller groups of facts. Give the inspector a surface title such as “Equipment details” and let EntityPreview lead with the entity name. Names and IDs preserve their supplied case.

Props

Accessibility

• A named aside exposes complementary details, without modal dialog semantics. Its title names it and its description describes it; an aria-labelledby or aria-describedby you pass is added to them.
• Long titles, descriptions and unbroken identifiers wrap inside the inspector; Close drops below a long title and stays in view.
• Background actions stay reachable by Tab.
• Closing is a native keyboard-operable button with a visible focus indicator.
• Closed content is unmounted and removed from the accessibility tree.

Manifest entry

<Inspector open={open} title={asset.name} onClose={closeAndRestoreFocus}><OperationalStatus state={asset.status} source={source} updatedAt={asset.updatedAt} /></Inspector>

{
  "description": "Modeless named details aside that leaves background content and focus navigation available.",
  "props": {
    "open": {
      "type": "boolean",
      "default": true
    },
    "title": {
      "type": "string",
      "required": true,
      "description": "Accessible title; entity names preserve supplied casing."
    },
    "description": {
      "type": "string"
    },
    "onClose": {
      "type": "function",
      "description": "Shows Close when supplied. The caller manages closing state and return focus."
    }
  },
  "slots": {
    "children": {
      "type": "ReactNode"
    }
  },
  "composable_with": [
    "AppShell",
    "SplitPane",
    "OperationalStatus",
    "ActionStatus"
  ],
  "never_inside": [
    "Button"
  ],
  "example": "<Inspector open={open} title={asset.name} onClose={closeAndRestoreFocus}><OperationalStatus state={asset.status} source={source} updatedAt={asset.updatedAt} /></Inspector>"
}