#Context Selector

Context Selector provides one compact contract for model, permission, and workspace choices. Native Select is preferred when options fit ordinary selection behavior.

npm install @a3s-lab/ui@0.4.0

<label class="context-selector" data-kind="workspace">
  <span data-context-label>Workspace</span>
  <select aria-label="Workspace"><option>A3S UI</option></select>
  <span data-context-description>Files and task history stay scoped here.</span>
</label>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

<label class="context-selector" data-kind="workspace">
  <span data-context-label>Workspace</span>
  <select aria-label="Workspace"><option>A3S UI</option></select>
  <span data-context-description>Files and task history stay scoped here.</span>
</label>

#Parameters

#States and variants

Unavailable choices remain visible with their reason when that helps users recover. Do not imply that a visual selection grants permission.

#Accessibility

Use a native label and control name. Anchored menus restore focus to their trigger and constrain themselves to the viewport.