This browser does not support the [required] attribute for t

Error message

This browser does not support the [required] attribute for trix-editor elements.

What it means

The get required() accessor is a stub that warns when the browser lacks form-associated custom element support; reading 'required' on a trix-editor always returns false there. This is why a form may silently skip required-field validation for the editor. Non-fatal console warning.

Source

Thrown at src/trix/elements/trix_editor_element.js:321

    return null
  }

  set name(value) {
    console.warn("This browser does not support the .name property for trix-editor elements.")
  }

  get disabled() {
    console.warn("This browser does not support the [disabled] attribute for trix-editor elements.")

    return false
  }

  set disabled(value) {
    console.warn("This browser does not support the [disabled] attribute for trix-editor elements.")
  }

  get required() {
    console.warn("This browser does not support the [required] attribute for trix-editor elements.")

    return false
  }

  set required(value) {
    console.warn("This browser does not support the [required] attribute for trix-editor elements.")
  }

  get validity() {
    console.warn("This browser does not support the validity property for trix-editor elements.")
    return null
  }

  get validationMessage() {
    console.warn("This browser does not support the validationMessage property for trix-editor elements.")

    return ""
  }

View on GitHub (pinned to 4700401311)

Solutions

Use a modern browser with form-associated custom elements so required participates in native validation.
Perform your own required check: validate that the editor's input value is non-empty on submit instead of relying on 'required'.
Accept/filter the warning; the getter safely returns false.
Guard validation code with a feature check for constraint-validation support on the element.

Example fix

// before
if (field.required && !field.value) show(field);
// after
const isTrix = field.tagName === 'TRIX-EDITOR';
const value = isTrix ? field.value || field.editor?.getDocument().toString().trim() : field.value;
if (field.required && !value) show(field);

Defensive patterns

Strategy: validation

Validate before calling

// before reading .required on any form control:
const isRequired = field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement
  ? field.required
  : field.getAttribute('data-required') === 'true';

Type guard

function hasNativeRequired(el) {
  return el instanceof HTMLElement && 'ElementInternals' in window && el.tagName !== 'TRIX-EDITOR';
}

Try / catch

try {
  const req = trixEditor.required;
  validateWith(req);
} catch (e) {
  validateWith(trixEditor.getAttribute('data-required') === 'true');
}

Prevention

Validate trix-editor values in your submit handler, not via the DOM required flag
Store requiredness in your own attribute (data-required) that works everywhere
Skip trix-editor in generic constraint-validation loops and handle it explicitly
Verify validation behavior in the oldest browser you support

When it happens

Trigger: Reading 'trixEditor.required' (e.g., generic form validation iterating form.elements and checking required) in an unsupported browser, executing the stub at trix_editor_element.js:320-324.

Common situations: Generic validation libraries (or native constraint validation UI) checking required fields; browsers like Safari < 16.4 or older Firefox where trix-editor cannot participate in constraint validation.

Related errors

AI-assisted analysis of basecamp/trix@4700401311 (2026-09-02). Data as JSON: /api/errors/be4e8c892e7c9ec7. Report an issue: GitHub.