PermissionMatrix

Role × permission matrix for RBAC admin settings with bulk-toggle and read-only state.

#Default usage

<PermissionMatrix
  permissions={[
    { id: "read", label: "Read" },
    { id: "write", label: "Write" },
    { category: "Billing", id: "invoice", label: "Invoice" }
  ]}
  roles={[
    { id: "admin", label: "Admin" },
    { id: "member", label: "Member" }
  ]}
  defaultValue={{ "admin:read": true, "admin:write": true, "admin:invoice": true, "member:read": true }}
/>

#Import

import { PermissionMatrix } from "@froggdesign/enter-ui-react";

#Accessibility

Renders a real <table> with <th scope="col"> for roles and <th scope="row"> for permissions. Each cell exposes a labelled Checkbox (or read-only mark) so screen readers announce role + permission + state.

#API

• roles, permissions: row + column data. permission.category groups rows under a divider.
• value / defaultValue + onValueChange: the matrix is a controlled or uncontrolled record keyed as roleId:permissionId.
• readOnly: replaces checkboxes with ✓ / — marks; remains keyboard navigable as a table.
• disabled: dim the matrix and skip toggle handlers.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.