Permission Selector

Assigns permissions.

html

<div class="permsel" style="--c:#BFD9F2;">
  <div class="permsel__text">
    <strong>Alex Chen</strong>
    <span class="permsel__meta">Project Atlas</span>
  </div>
  <label class="permsel__field">
    <span class="permsel__label">Permission</span>
    <select class="permsel__select">
      <option value="viewer">Can view</option>
      <option value="editor">Can edit</option>
      <option value="admin">Can administer</option>
      <option value="owner">Owns resource</option>
    </select>
  </label>
  <span class="permsel__badge permsel__badge--editor">editor</span>
</div>
<style>
.permsel { display: flex; align-items: center; gap: 12px; font: 14px/1.4 system-ui, sans-serif; color: #241430; max-width: 360px; flex-wrap: wrap; }
.permsel__meta { display: block; font-size: 12px; opacity: .75; }
.permsel__field { display: flex; flex-direction: column; font-size: 12px; gap: 2px; margin-left: auto; }
.permsel__select { border: 1.5px solid var(--c); border-radius: 8px; padding: 5px 8px; font: inherit; background: #FAF7F2; color: #241430; }
.permsel__select:focus-visible { outline: 2px solid var(--c); }
.permsel__badge { font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1.5px solid var(--c); }
.permsel__badge--viewer { background: transparent; color: #241430; }
.permsel__badge--editor { background: var(--c); color: #241430; }
.permsel__badge--admin { background: #241430; color: #FAF7F2; border-color: #241430; }
.permsel__badge--owner { background: #E8A020; color: #241430; border-color: #E8A020; }
</style>

tailwind

<div class="permsel-tw flex items-center gap-3 flex-wrap font-sans text-[#241430] max-w-sm" style="--c:#BFD9F2;">
  <div>
    <strong class="block">Alex Chen</strong>
    <span class="block text-xs opacity-75">Project Atlas</span>
  </div>
  <label class="flex flex-col text-xs gap-0.5 ml-auto">
    <span>Permission</span>
    <select class="border-[1.5px] rounded-lg px-2 py-1 bg-[#FAF7F2] text-[#241430]" style="border-color:var(--c);">
      <option value="viewer">Can view</option>
      <option value="editor">Can edit</option>
      <option value="admin">Can administer</option>
      <option value="owner">Owns resource</option>
    </select>
  </label>
  <span class="permsel-tw__badge permsel-tw__badge--editor text-[11px] font-bold uppercase px-2 py-0.5 rounded-full border-[1.5px]" style="border-color:var(--c);">editor</span>
</div>
<style>
.permsel-tw__badge--viewer { background: transparent; }
.permsel-tw__badge--editor { background: var(--c); }
.permsel-tw__badge--admin { background: #241430; color: #FAF7F2; border-color: #241430; }
.permsel-tw__badge--owner { background: #E8A020; border-color: #E8A020; }
</style>

react

export function PermissionSelector({
  user = "Alex Chen",
  scope = "Project Atlas",
  role = "editor",
  inherited = false,
  color = "#BFD9F2",
}) {
  const badge = {
    viewer: { background: "transparent", color: "#241430", borderColor: color },
    editor: { background: color, color: "#241430", borderColor: color },
    admin: { background: "#241430", color: "#FAF7F2", borderColor: "#241430" },
    owner: { background: "#E8A020", color: "#241430", borderColor: "#E8A020" },
  }[role] ?? {};
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap", font: "14px/1.4 system-ui, sans-serif", color: "#241430", maxWidth: 360 }}>
      <div>
        <strong style={{ display: "block" }}>{user}</strong>
        <span style={{ display: "block", fontSize: 12, opacity: 0.75 }}>{scope}{inherited ? " · Inherited" : ""}</span>
      </div>
      <label style={{ display: "flex", flexDirection: "column", fontSize: 12, gap: 2, marginLeft: "auto" }}>
        <span>Permission</span>
        <select defaultValue={role} style={{ border: `1.5px solid ${color}`, borderRadius: 8, padding: "5px 8px", background: "#FAF7F2", color: "#241430" }}>
          <option value="viewer">Can view</option>
          <option value="editor">Can edit</option>
          <option value="admin">Can administer</option>
          <option value="owner">Owns resource</option>
        </select>
      </label>
      <span style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", padding: "3px 8px", borderRadius: 999, border: "1.5px solid", ...badge }}>{role}</span>
    </div>
  );
}