Field Lock Mark

Field Lock Mark is the one muted lock glyph for a readOnly fill-in field. It is decorative on purpose (aria-hidden): native readonly and Read-Only Hint already announce the state to assistive tech.

Kit hosts compose this; prefer FormItem, Editable Table, or Inline Edit so placement stays one slot per owner. Composition rules: Field Lock Affordance.

When To Use

• Kit hosts composing a custom readOnly control that FormItem / Editable Table / Inline Edit do not already chrome.
• Pair with host-owned reason copy using fieldLockReasonClass (or the table popover class) — never put the reason on the glyph.
• Prefer FormItem (label slot), Editable Table (trailing cell affix), or Inline Edit (trigger slot) instead of mounting this yourself.
• Do not use it for readPretty facts, disabled fields, row/surface locks, or as a security badge.

Features

Installing

pnpm dlx shadcn@latest add https://ui.isaacfei.com/r/field-lock-mark.json

npx shadcn@latest add https://ui.isaacfei.com/r/field-lock-mark.json

yarn dlx shadcn@latest add https://ui.isaacfei.com/r/field-lock-mark.json

bun x shadcn@latest add https://ui.isaacfei.com/r/field-lock-mark.json

With a namespace: npx shadcn@latest add @f-ui/field-lock-mark.

registryDependencies: none. Runtime npm: lucide-react.

Usage

import { FieldLockMark } from "@/components/f-ui/internals/field-lock-mark";

<div className="flex items-center gap-1.5">
  <span>Warehouse</span>
  <FieldLockMark />
</div>

Examples

Label Slot

Same placement FormItem uses: the mark sits beside the label, not inside the control. The field stays a box so it still reads as a fill-in field that is locked now.

"use client";

import { FieldLockMark } from "@/components/f-ui/internals/field-lock-mark";

export function FieldLockMarkDemo() {
  return (
    <div className="max-w-sm space-y-1.5">
      <div className="flex items-center gap-1.5">
        <span className="text-sm font-medium">Warehouse</span>
        <FieldLockMark />
      </div>
      <input
        readOnly
        value="East dock"
        aria-label="Warehouse"
        className="h-8 w-full rounded-lg border border-input bg-transparent px-2.5 text-sm"
      />
    </div>
  );
}

Host Reason Copy

Reason is host-owned text under the control, wrapped with fieldLockReasonClass. The glyph stays silent; the copy explains why.

"use client";

import {
  FieldLockMark,
  fieldLockReasonClass,
} from "@/components/f-ui/internals/field-lock-mark";

export function FieldLockMarkReasonDemo() {
  return (
    <div className="max-w-sm space-y-1.5">
      <div className="flex items-center gap-1.5">
        <span className="text-sm font-medium">SKU</span>
        <FieldLockMark />
      </div>
      <input
        readOnly
        value="WIDGET-104"
        aria-label="SKU"
        className="h-8 w-full rounded-lg border border-input bg-transparent px-2.5 text-sm"
      />
      <p className={fieldLockReasonClass} data-slot="field-lock-reason">
        Posted orders cannot change SKU.
      </p>
    </div>
  );
}

API Reference

Props

Constants

See Also

• Field Lock Affordance — placement, scope, and reason delivery
• Read-Only Hint — screen-reader announcement
• Form (Formily) — FormItem label slot
• Editable Table — trailing cell affix
• Inline Edit — pencil / lock trigger pair