Field Chrome

Soft admin inputs, sizes, focus rings, disabled and readonly.

Soft admin fields

Focus

These fields use a soft box-shadow ring on focus while keeping a visible indicator. Chapter 12’s thicker outline remains valid for accessibility teaching.

Important pattern

Focus can use a ring without dropping accessibility.

.field:focus {
  border-color: #86a897;
  box-shadow: var(--ring);
}