For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.4.1/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.4.1/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.4.1/en/components/approval-request.md.

Approval Request

Approval Request explains why an Agent needs additional authority and collects one bounded permission decision. The host application owns policy evaluation, expiration, persistence, and execution after approval.

Live preview

Allow a command outside the project?

The Agent wants to inspect the installed Node.js runtime.

Approval required
Command
node --version
Working directory
C:\Program Files\nodejs
Permission scope

Usage

<section
  class="approval-request"
  data-state="pending"
  aria-labelledby="approval-title"
>
  <header>
    <div>
      <h2 id="approval-title">Allow this command?</h2>
      <p>Reason and impact.</p>
    </div>
  </header>
  <section>Exact resource, command, site, or capability.</section>
  <form>
    <fieldset>
      <legend>Permission scope</legend>
      ...
    </fieldset>
    <footer>...</footer>
  </form>
</section>

Parameters

APIValuesPurpose
class="approval-request"RequiredNamed decision surface
data-statepending, approved, denied, expiredApproval lifecycle presentation
Direct <header>RequiredDecision title, reason, and status
Direct <section>RecommendedExact command, path, site, capability, and impact
Direct <form>Pending stateNative scope selection and decision submission
<fieldset> and <legend>Required for several scopesNames the mutually exclusive choices

States and variants

Render only scopes that policy actually permits. Finished states should replace decision controls with immutable outcome text, actor, and time. If approval expires while focused, retain the explanation, disable stale controls, and announce that a fresh request is required.

The component emits no policy events. Use native submit for the selected scope and ordinary button events for denial or cancellation. Applications may cancel Submit to perform an asynchronous decision.

Accessibility

Use a heading referenced by aria-labelledby. Explain the concrete resource and consequence before the controls. Scope options use native radio inputs in a Fieldset. Move focus to the request heading only when the request blocks the current task; otherwise announce its arrival without stealing focus. Never use color as the only distinction between pending, approved, and denied states.