Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[Bug]: fluent-checkbox submits "on" when the checked attribute is before value

Open Beginner friendly
  • Is something wrong?
#36,930 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
typescript
Domain
frontend, web-dev

Research direction

Start by tracing initialValueChanged and initialCheckedChanged for the checkbox and switch components; the issue shows that changing value after checked leaves the submitted form value stale. Reproduce both attribute orders and compare their form data with a native checkbox. Done when both Fluent components submit the declared value regardless of attribute order.

Written by the indexing model from the issue text.

Description

Component

Checkbox

Package version

3.1.3

@microsoft/fast-element version

3.0.4

Environment
OS: Windows 11
Browsers: Microsoft Edge 155 (Chromium 155)
npmPackages:
  @fluentui/web-components: 3.1.3
  @microsoft/fast-element: 3.0.4
Current Behavior

When <fluent-checkbox> (or <fluent-switch>) is rendered with the checked attribute before the value attribute, checkbox.value returns the value attribute, but the form submits "on".

Attributes are applied in markup order during the upgrade:

  1. checked → initialCheckedChanged → checked = true → setFormValue(this.value) with the default value "on".
  2. value → initialValueChanged only sets _value, so the form value stays "on":
initialValueChanged(prev, next) {
    this._value = next;
}

With value before checked, the expected value is submitted.

Expected Behavior

The attribute order doesn't matter: a checked <fluent-checkbox checked value="yes"> submits "yes", like <input type="checkbox" checked value="yes">.

Reproduction

https://oonoobmasteroo.github.io/fluent-checkbox-form-value/ (source: https://github.com/oONoobMasterOo/fluent-checkbox-form-value)

Steps to reproduce
  1. Open the reproduction:
<form id="form">
  <fluent-checkbox name="checkedFirst" checked value="yes"></fluent-checkbox>
  <fluent-checkbox name="valueFirst" value="yes" checked></fluent-checkbox>
  <fluent-switch name="switchCheckedFirst" checked value="yes"></fluent-switch>
  <input name="native" type="checkbox" checked value="yes">
  <button type="button" id="check">Show FormData</button>
</form>
<pre id="out"></pre>

<script type="module">
  import "https://cdn.jsdelivr.net/npm/@fluentui/[email protected]/dist/web-components.min.js";

  document.getElementById("check").addEventListener("click", () => {
    const data = Object.fromEntries(new FormData(document.getElementById("form")));
    document.getElementById("out").textContent = JSON.stringify(data, null, 2);
  });
</script>
  1. Click Show FormData.
  2. Result: { "checkedFirst": "on", "valueFirst": "yes", "switchCheckedFirst": "on", "native": "yes" }.

A possible fix: in initialValueChanged, also update the form value when the checkbox is checked (e.g. if (this.checked) this.setFormValue(next)).

Are you reporting an Accessibility issue?

no

Suggested severity

Medium - Has workaround

Products/sites affected

Fluent UI Blazor (FluentCheckbox / FluentSwitch in statically rendered forms; worked around by rendering value before checked)

Are you willing to submit a PR to fix?

yes

Validations
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.
Dominant language
TypeScript
Stars
20.3k
Forks
2.9k
Avg merge
2d 6h
Merged PRs (30d)
53

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

  • No Dockerfile or Docker Compose file
  • Has a pull request template
  • No contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from microsoft/fluentui

All issues in microsoft/fluentui

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.