New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support for indeterminate checkboxes #4828
Comments
@tgoldenberg I'm not sure to understand. What's the use case? |
You can target it with css using the |
And you should be able to access the DOM element with refs (edit - via our component) to set the property. |
yeah, I tried using |
@tgoldenberg What happens? does the DOM property reset after you change it? |
@nathanmarks Nothing happens. Nothing. |
@tgoldenberg Did you add any |
@tgoldenberg Just having a play with it now. I see the difficulty you're having here even with the property set. All I have right now with the current setup is something slightly hacky: input[type="checkbox"]:indeterminate + div > div:after {
content: 'indeterminate_check_box';
font-family: 'Material Icons';
font-size: 24px;
} |
I'll look into supporting this better in the |
Just my 2 cents. One way to support this (that I would prefer) is to allow checked to be either |
@Alxandr I like the idea of keeping everything under one property as put a hard constraint. The state can't be |
Yeah. I seem to recall (from WPF in .NET or something similar) that checkboxes const Test = () => (
<div>
<Checkbox /> // unchecked
<Checkbox checked /> // checked
<Checkbox checked={null} /> // indeterminate
</div>
); I think this is sufficiently explicit, though on the other hand it might be safer to do |
There is some trouble with
React itself does not support indeterminate checkboxes facebook/react#1798. https://www.w3.org/TR/2014/WD-html51-20140617/forms.html#checkbox-state-(type=checkbox) says:
It can be better to set separate prop for it. |
@gulderov Yes, I agree. After benchmarking what other libraries are doing, I believe that blueprintjs is handling the problem very well. I would be awesome if we could do the same.
|
@gulderov There is no reason material-ui can't create a better abstraction on top of the one provided by React itself though. And sure,
|
@Alxandr Don't we lose an extra information? Isn't the point to notify that the value is mostly true of false but not completely? Let's say it's used in a regular Form, what's the value sent to the server? |
Lose information? We lose no information. A checkbox can be in one of 4 states technically:
If you change it to use only one prop, the only one you can't describe is |
An indeterminate checkbox should have different styling I feel. I like how primeng does it. |
@Parthchokshi The styling is different: |
I meant, we don't have a tristate checkbox, it just toggles the color when I click on that. We can have it change icon when user click on it. The initial indeterminate state should be blank. And then yes/no should be tick/cross icons. This should be really useful in RSVP UI's, where user can say:
May be a new component all by itself or extend Checkbox. |
Is there an update on how to create an unchecked indeterminate state that's blank rather than with a grey/secondary color in the background of the checkbox? I've tried pulling in different checkbox icons from MUIs selection (i.e. |
@veronicaerick Please submit questions like this on StackOverflow next time. People answers on GitHub don't compound as much. I would try something like this: import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';
import CheckBoxOutlineBlank from '@material-ui/icons/CheckBoxOutlineBlank';
export default function Checkboxes() {
const [state, setState] = React.useState({
checkedF: true,
});
const handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
setState({ ...state, [name]: event.target.checked });
};
return (
<Checkbox
checked={state.checkedF}
indeterminateIcon={state.checkedF ? undefined : <CheckBoxOutlineBlank />}
onChange={handleChange('checkedF')}
value="checkedF"
indeterminate
inputProps={{
'aria-label': 'indeterminate checkbox',
}}
/>
);
} |
will do, thank you so much for the response this works perfectly! 👍 |
Description
It would be great to be able to set
indeterminate={true}
on the<Checkbox/>
components. Any suggestions for this, or is there a plan to include this?Thank you!
Images & references
-->
The text was updated successfully, but these errors were encountered: