emberjs/ember.js · warning

ember-glimmer.input.checkbox

ember-glimmer.input.checkbox

Error message

`<Input @type="checkbox" />` reflects its checked state via the `@checked` argument. You wrote `<Input @type="checkbox" @value={{...}} />` which is likely not what you intended. Did you mean `<Input @type="checkbox" @checked={{...}} />`?

What it means

The Input component's checked getter warns (code ember-glimmer.input.checkbox) when a checkbox-type <Input> is given @value instead of @checked. For checkboxes, the checked state is bound via @checked; @value is almost always a developer mistake (copied from text-input usage).

Source

Thrown at packages/@ember/-internals/glimmer/lib/components/input.ts:188

    }

    assert(
      'The `@type` argument to the <Input> component must be a string',
      typeof type === 'string'
    );

    return isValidInputType(type) ? type : 'text';
  }

  get isCheckbox(): boolean {
    return this.named('type') === 'checkbox';
  }

  private _checked = valueFrom(this.args.named['checked']);

  get checked(): unknown {
    if (this.isCheckbox) {
      warn(
        '`<Input @type="checkbox" />` reflects its checked state via the `@checked` argument. ' +
          'You wrote `<Input @type="checkbox" @value={{...}} />` which is likely not what you intended. ' +
          'Did you mean `<Input @type="checkbox" @checked={{...}} />`?',
        untrack(
          () =>
            this.args.named['checked'] !== undefined ||
            this.args.named['value'] === undefined ||
            typeof valueForRef(this.args.named['value']) === 'string'
        ),
        { id: 'ember.built-in-components.input-checkbox-value' }
      );

      return this._checked.get();
    } else {
      return undefined;
    }
  }

View on GitHub (pinned to 26f97246a8)

Solutions

1. Replace @value with @checked to bind the checkbox state.
2. Keep @value only if you intentionally need the value attribute submitted with the form.
3. Use <Checkbox> style native input if you need raw control.
4. Search templates for 'checkbox' inputs using @value to fix all instances.

Example fix

// before
<Input @type="checkbox" @value={{this.isEnabled}} />
// after
<Input @type="checkbox" @checked={{this.isEnabled}} />

// Template-level guard: only pass @checked on checkbox Inputs
const isCheckboxInput = (args) => args.type === 'checkbox' && args.value !== undefined && args.checked === undefined;
if (isCheckboxInput(this.args.named)) console.warn('use @checked for checkbox state');

function usesChecked(inputArgs) { return inputArgs.type === 'checkbox' && inputArgs.checked !== undefined; }

null

When it happens

Trigger: Rendering <Input @type="checkbox" @value={{someBool}} /> — isCheckbox true while named args include @value (without @checked defined), triggering the assert during the checked getter.

Common situations: Copying an <Input> snippet from a text field and changing type to checkbox; migrating from classic {{input type='checkbox'}} helpers; misunderstanding that @value on a checkbox sets the hidden value attribute, not checkedness.

Related errors

• Compile Error: ${template.problem} @ ${template.span.start}.
• A resolved helper cannot be passed as a named argument as th
• deprecation override for ${id} not found
• You must pass both the owner and args to super() in your com
• You must pass both the owner and args to super() in your com

AI-assisted analysis of emberjs/ember.js@26f97246a8 (2026-09-01). Data as JSON: /api/errors/83b4b3f79a287f52. Report an issue: GitHub.