Skip to content

feat(ui-checkbox): add data-checked attribute to reflect checked state#2528

Open
ToMESSKa wants to merge 1 commit intomasterfrom
INSTUI-4902-feature-checkbox-toggle-add-checked-state-attribute-for-tracking
Open

feat(ui-checkbox): add data-checked attribute to reflect checked state#2528
ToMESSKa wants to merge 1 commit intomasterfrom
INSTUI-4902-feature-checkbox-toggle-add-checked-state-attribute-for-tracking

Conversation

@ToMESSKa
Copy link
Copy Markdown
Contributor

@ToMESSKa ToMESSKa commented Apr 27, 2026

INSTUI-4902

ISSUE:

  • the checked state of the Checkbox was only reflected as a DOM property, which MutationObserver-based tools can't observe and adding data-checked gives them an attribute to watch.

TEST PLAN:

  • inspect the <input> element in Checkbox v11.7, the data-checked attribute value should reflect the checked state (true, false, mixed) and upgrade accordingly in the checkbox and toggle variant too
  • the screenreader-emmitted messages should stay the same

@ToMESSKa ToMESSKa self-assigned this Apr 27, 2026
@github-actions
Copy link
Copy Markdown

PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://instructure.design/pr-preview/pr-2528/

Built to branch gh-pages at 2026-04-27 13:07 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@ToMESSKa ToMESSKa requested review from joyenjoyer and matyasf April 27, 2026 14:54
Copy link
Copy Markdown
Contributor

@joyenjoyer joyenjoyer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good job, works well for me in Firefox, Chrome and Safari

Copy link
Copy Markdown
Collaborator

@matyasf matyasf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good, just documentation is missing

>
<div css={styles?.container}>
<input
data-checked={indeterminate ? 'mixed' : this.checked}
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please write in Checkboxes and CheckboxGroup's Readme about this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants