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.

  • 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 '15 at 8:51
  • 1
    Can you give more context on this, what problem are you trying to solve? – Serhiy Baryshniev Nov 18 '15 at 16:33
  • I'm sorry, but why do you need null/unknown? Isn't null just "empty?" – Majo0od Nov 18 '15 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 '15 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 '15 at 23:10
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 | |
  • 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? – Majo0od Nov 18 '15 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 '15 at 2:02
4

mockup

download bmml source – Wireframes created with Balsamiq Mockups

| improve this answer | |
  • Having groups of radio buttons without a selected item is something to avoid in UX. – André Nov 24 '15 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, privacy policy and cookie policy

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