9

There are common pattern for nullable (three state) bool checkbox enter image description here

But in real life, if user see only indeterminate (null) state and don't see checked (false) it often confusing that indeterminate is looks like checked.

Is there better patterns for this component?

Another way is to use three radio buttons (true/false/null) - but it's look like overkill for simple parameter.

Improve this question
6
  • This would be better asked over on UX.stackexchange That said, while this is a common pattern in Windows desktop, I don't know if it's necessarily a commonly understood UI pattern. I think context is also going to be very important here (both your audience, and what the items actually are).
    – DA01
    Nov 18, 2015 at 8:51
  • 1
    Can you give more context on this, what problem are you trying to solve?
    – Serhiy Baryshniev
    Nov 18, 2015 at 16:33
  • I'm sorry, but why do you need null/unknown? Isn't null just "empty?"
    – UXerUIer
    Nov 18, 2015 at 18:41
  • @Majo0od think about a simple db screen to enter gender (even if you'd better use a combobox to accommodate all possible values).
    – Adriano Repetti
    Nov 19, 2015 at 11:35
  • 2
    The indeterminate state is meant to convey a mixed value - a good example is the "read only" property on a folder in windows displays indeterminate when some of the items in the folder are read-only and others are not. it's not meant to convey "not set". A "nullable boolean" is not really a boolean, it's a ternary value. Checkboxes are meant for true booleans that have only a "yes" and "not yes" state. If you want to accept a ternary value, you should use a radio button control like the other answers show - it's not overkill, it's just a 1:1 mapping of control to value.
    – notatoad
    Nov 24, 2015 at 23:10

3 Answers 3

Reset to default
8

The 3 state checkbox has always been confusing. Think of it as a UI anti-pattern. Much clearer is 3 radio buttons labelled with plain language.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Another way is to use three radio buttons (true/false/null) - but it's look like overkill for simple parameter.

I disagree. It's a clear, obvious and conventional way to present the choices. If you want to save space you could use a drop down list to present them but that is not as immediately obvious as 3 radio buttons.

Improve this answer
2
  • I'm incredibly confused by this approach. When you're talking about boolean, you only have two options: true or false. Why do you need unknown in the first place? Is there a scenario that unknown is ever selected?
    – UXerUIer
    Nov 18, 2015 at 18:44
  • 1
    The question was about a choice between 3 options, specifically "true/false/null". I don't know the scenario, you might ask the OP.
    – obelia
    Nov 19, 2015 at 2:02
4

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
1
  • Having groups of radio buttons without a selected item is something to avoid in UX.
    – André
    Nov 24, 2015 at 21:46
2

TriState checkboxes are usually used within tree structures where you have children denoted with both checked and unchecked options and the indeterminate state is assigned to the parent element outlining that some of the children are "true" and some are "false"...

Otherwise, both radio buttons and drop downs are valid options depending on the context - whether web/desktop/mobile, how much space do you have etc.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.