[Checkbox] Add checked animation

[SamiSaves]

The Checkbox component is missing the animation for the icon when toggling it. This makes checking the checkbox look bit cluncky, especially when toggling it from the label.

In material design demo you can clearly see the icon animated when you toggle it: https://material-components.github.io/material-components-web-catalog/#/component/checkbox

Compare it to the current implementation in material-ui. See especially how it looks when toggling it by clicking the label.
https://material-ui.com/components/checkboxes/

Even in v0 has some kind of animation, which in my opinion makes it look better than the current version https://v0.material-ui.com/#/components/checkbox

• This is a v1.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Edit: Updated outdated link

[eps1lon]

Good catch. The design spec also displays an animation: https://material.io/design/components/selection-controls.html#checkboxes

It currently has a transition but for fill whereas mcw has an opacity transition. That might be the issue here?

[calebissharp]

@eps1lon Is it alright if I work on this?

[eps1lon]

@calebissharp
That'd be great.

[oliviertassinari]

In case somebody wants to work on this issue, he can benchmark MCW implementation.

[NawarA]

Also, opening this open to a greater discussion, the spec calls for animated icons, with 3 durations: simple (100 ms - what MUI currently uses), (200ms average - the checkbox example above), and complex (500ms).

spec:
https://material.io/design/iconography/animated-icons.html#usage

Looks like there are a few transitions here:

1. enable to disable (and the reverse transition)
2. transition between two icons on click
3. animate the same icon onclick

[eluchsinger]

@oliviertassinari Did anyone work on this one? Would it still be in v4 or already v5?

[oliviertassinari]

@eluchsinger Not I'm aware of. I would be cautious with the bundle size and customization implications. I don't think that it should land in v4.

[paperdave]

much earlier when i animated the radio button component, i also started working on this issue, but never finished it. a partial implementation of the animated checkbox is on npm but it's not complete, nor the most quality code.

for people who are browsing this issue and just want a thing that works, that may be of use to them.

[eluchsinger]

I would do it myself, but I am not an animations expert and lack a bit of the time to look into it. If I find some time I can do it myself and create a PR.

[benatkin]

Notably GMail doesn't use it, at least for selecting messages. It would be interesting design decision to default to animated in long forms but default to Material UI's current implementation in table views. Not one I'm capable of making except for my own sites because IANAD but it seems like a good idea to me! I'm also sure Material UI could handle it but not sure it would be worth the effort.

[NawarA]

re: worth the effort.

Its just CSS animations, right? lol Can't we use Google's open source repo for CSS? The code is right there ;)

I believe all great UI's feel good. Anything that can make the library feel better is a worthwhile investment for everyone in the community. You're totally right, that developers should be able to choose which animation to use. According to the Material spec, developers / designers should be using animations that are simple, average, and complex, which supports your insight.

Below is a screenshot / video from the spec, found here.

MUI currently supports simple. This feature request is to support average, just like Google shows off in their MUI web components. I totally agree, developers / designers need to have final say on where to utilize each.

🖖

Video link:

[benatkin]

As for effort, I was specifically talking about the effort to have different defaults for table row checkboxes, for which animations could get in the way, and form checkboxes, which would be welcome, especially in sign up forms! And I realize it could be easy to have a partial solution for differing defaults, but it would need to be built to the standards of Material UI, and it may be better just to default to animated or to not animated.

[VityaSchel]

In case somebody wants to work on this issue, he can benchmark MCW implementation.

I ended up using official material components module. Below is my MaterialCheckbox component which supports color prop and onChange event but I encourage everyone who wants to implement checkbox animation to write their own component.

Code + demo

npm install @material/checkbox

import '@material/checkbox/dist/mdc.checkbox.css'

MaterialCheckbox.propTypes = {
  id: PropTypes.number.isRequired,
  children: PropTypes.node,
  color: PropTypes.string,
  onChange: PropTypes.func,
  checked: PropTypes.bool,
  disabled: PropTypes.bool
}

function MaterialCheckbox(props) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', userSelect: 'none' }}>
      <div className="mdc-checkbox">
        <input
          type="checkbox"
          className="mdc-checkbox__native-control"
          id={'checkbox-'+props.id}
          onChange={props.onChange ?? (() => {})}
          checked={props.checked}
          disabled={props.disabled}
        />
        <div className="mdc-checkbox__background" style={{ '--mdc-checkbox-checked-color': props.color }}>
          <svg className="mdc-checkbox__checkmark" viewBox="0 0 24 24">
            <path className="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
          </svg>
          <div className="mdc-checkbox__mixedmark"></div>
        </div>
        <div className="mdc-checkbox__ripple"></div>
      </div>
      <label htmlFor={'checkbox-'+props.id} style={{ cursor: 'pointer' }} className={styles['mdc-checkbox__label']}>{props.children}</label>
    </div>
  )
}

Usage:

const [checked, setChecked] = React.useState(false)
<MaterialCheckbox id={1} color='#ad3e3a' onChange={e => setChecked(e.target.checked)} checked={checked}>Foo bar</MaterialCheckbox>

checkboxes.mp4

[TamirCode]

is there an official way to add this to my MUI checkbox yet?
even a simple opacity transition would be better than nothing

[Slowl]

Bumping this issue for 2023.

We could indeed handle this ourselves but having a default animation should be the minimum in my opinion when we disable the ripple effect.
Many popular libraries have an animation like Mantine or Chakra for example

[yuvalkarmi]

Edit 2: For anyone just looking for a solution that still uses native MUI components in the meantime, I created this component called CheckboxWithLabelAndRipple, here's the code:
https://gist.github.com/yuvalkarmi/215451742b09bcb25498deffe3ebfa9b

---

Edit 1: I just realized after reading @Slowl's comment more carefully that there already is an animation on the original Checkbox component... sort of. There's a ripple effect, but only if you click directly on the checkbox itself -- not on the label.

If you use the Checkbox in a FormControlLabel (e.g. from the docs <FormControlLabel control={<Checkbox defaultChecked />} label="Label" />), then there is no ripple animation when the click is on the label, and therefore no animation at all, which is out of sync with the material design spec.

---

Original comment:

Bumping this issue for 2024 :)

This implementation is fantastic:
https://codepen.io/abottega/pen/vNzQMo

Would love to see this make it in MUI <3

[siriwatknp]

This issue is outdated (MD2 related). We aim to have a fresh look for Material UI in the near future, so I’m closing this.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@SamiSaves How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[oliviertassinari]

Repurposing this to be about having a checked animation in the next design iteration. Even in this direction of changing the design, it still seems important that we make sure that we cover checkboxes and animations, maybe we should have it, maybe not, this issue would give us direction there.

Examples of systems that have one:

• Vercel https://vercel.com/geist/checkbox

Screen.Recording.2024-11-19.at.15.23.01.mov

• Stripe https://dashboard.stripe.com/login

Screen.Recording.2024-11-19.at.15.24.09.mov

[NawarA]

@oliviertassinari The examples you posted are "okay", but I'd say they don't release enough dopamine.

Check out the example below, we can release dopamine whenever the user "checks" the box. I'd recommend

From Material 3

lwj3f7ot-GM3-Components-Checkbox-Guidelines-1-v01.mp4

lwj3h4ri-GM3-Components-Checkbox-Guidelines-2-v01.mp4