react-jsonschema-form
react-jsonschema-form copied to clipboard
Checkbox default false
Prerequisites
- [x] I have read the documentation;
- [x] In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.
- [x] Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue.
Description
When working with certain required fields, elements like 'checkbox' do not automatically assume a value, leading to surprising failures where unchecked would be expected to be false.
Steps to Reproduce
-
Open the Example
-
Click submit and see failure
- Click checkbox
- Click Submit (success)
- Click checkbox (deselct)
- Click Submit (success)
Expected behavior
Unchecked checkboxes should be default present.
Also... empty arrays (similarly) should be default [] (has a similar thing where you need to toggle the + / - element button).
Actual behavior
No value is automatically filled in if the values aren't touched somehow.
I believe this is expected behavior. Why would unchecked checkboxes be true by default? Did you mean to say "Unchecked checkboxes should be default false"?
In that case, you can make that happen by making the schema:
{
"$schema": "http://json-schema.org/draft-07/schema#",
"properties": {
"arguments": {
"type": "boolean",
"default": false
}
},
"required": [
"arguments"
]
}
The idea behind not putting values for "untouched" inputs is intentional -- because sometimes a form will want to distinguish between if the user included data or not. I guess it makes more sense for textboxes rather than checkboxes (because when a checkbox is untouched, it's the same as being false). You can work around it by adding "default": false though.
I meant by default present, sorry for the confusion.
Adding default false isn't exactly a great option since in my use case the schemas are automatically generated out of another system... (rust's jsonschema generator library). I would think that if the field is required maybe we can have a required field have a default? Or maybe we can make it a setting on the Form itself to have some kind of map for required field type defaults for e.g. array, map, or bool? But I really strongly think the default should be to have unchecked false in this circumstance, as I'll show below.
another option would be to somehow visually make it clear that the field must be touched and is tri-state? Rendering as a dropdown (blank, yes, no) would be more clear you have to pick something.
When i first saw this error, it took me quite a while to figure out why it was saying required when the value I wanted was already the one shown on the form. The only way to input the value that i do want is to first input a value i don't want, and then to change it to the value I want. Maybe a good design rule could be 'users should not have to enter an incorrect value in order to enter a correct value'. Let me walk through an example where it could be particularly problematic:
Suppose a form has a checkbox with a field that is "allow spending money from your account". A user trys to say "no I don't want that" and clicks submit. then they see this

So then they think, ok i guess i have to allow it? Then they click it, then click submit again and it submits. Now, as the developer of this form, I have no idea if they actually wanted it, or if it was just a mistake.
You're right to point out that a user could do the opposite, not read what a checkbox is for and not interact with it. But it's at least a lot less confusing then the flow above.
@JeremyRubin did you find a solution to this? Could you share.
I think i ended up just using custom enums and avoiding checkbox.
"minItems": 1, worked => here
@JeremyRubin - A scenario where you would not want this behaviour is if you've got a 'I agree to the terms of service' type checkbox, you it's mandatory that they set it as true.
However - perhaps the better way to do this would be to use the const property like:
"foo": {
"type": "boolean",
"const": true
},
@dwjohnston I think what @JeremyRubin wants to say is: when we have a field, such as "whether to install additional plugins", when the user reads the field, the checkbox on the UI is unchecked by default, which is easy for the user to understand that he has selected No. , but when submitting, he was prompted that this field cannot be empty, and the user needs to manually check and then cancel. This behavior is really hard to understand, isn't it?
correct @chwetion