[docs] IndeterminateIcon is Missing From Checkbox Docs

[jwalkerinterpres]

Related page

https://mui.com/material-ui/react-checkbox/

Kind of issue

Missing information

Issue description

See #43415

Telling people about how a library works in issue replies is not ideal: the prop should be documented (on the main Checkbox UI docs page).

Also it's worth noting that the API docs mention indeterminate icon ... but even they don't say anything about having to use indeteriminateIcon to avoid an SVG glitch if you use a custom checkbox.

Context

Trying to use an indeterminate checkbox with a custom checked icon.

Search keywords: indeterminate checkbox

[siriwatknp]

Thanks for the feedback! I agree with you. There should be a section explaining that you could replace the intermediate icon.

[Nipun-Milinda]

Hi @siriwatknp,

Thanks for acknowledging the feedback on the Checkbox component documentation! I'd like to contribute by adding the missing details about the indeterminateIcon prop and how to avoid the SVG glitch when using a custom checkbox.

I'll include a section explaining the proper usage and provide a code example to make it clearer for others. Let me know if there are any specific guidelines or additional points you'd like me to cover.

Looking forward to your response!

[marctaylor01]

Hi!

My name is Marc, and I’m excited to start contributing to MUI!

I’m new to open-source, but I have experience with React and the use of MUI, and I’m eager to learn more and help out where I can. I’ve gone through the contribution guidelines and am currently looking at some issues labeled “good first issue.”

I’d love to hear any advice on where to start and I was wondering if this Issue is available to take?

Thanks!

[marctaylor01]

I'll start working on this issue, @siriwatknp could you assign me this issue please?

[ZeeshanTamboli]

Also it's worth noting that the API docs mention indeterminate icon ... but even they don't say anything about having to use indeterminateIcon to avoid an SVG glitch if you use a custom checkbox.

Can you show an example in the form of a reproduction where the SVG glitch is occurring?

[jwalkerinterpres]

If you look at the original ticket (linked above) you'll see I added a code sandbox link ... but (for some odd reason) the styling showing the issue got left out 😦

But, you can still see the issue there, if you just modify the checkbox to add a style line, like so:

<Checkbox
    checked={checked[0] && checked[1]}
    indeterminate={checked[0] !== checked[1]}
    onChange={handleChange1}
    style={{ fill: "red", stroke:'red', background: "black" }}
/>

The original ticket also has an image showing the extra (SVG-based, not CSS) "border" that you should see with that line.