I'm building an application that allows users to fill out a self assessment of their business. We'd like to give users the ability to print their work with a few options:

  1. Print all questions/responses (including those that have not been answered)

  2. Print only questions that have been answered by the user.

  3. Print only questions that have been answered by the user, and match a particular answer(s).

These three options are mutually exclusive so they're a good candidate for radio buttons, but the third option presents some difficulty as it requires a sub selection.

This is currently how I have it designed:

Radio button group with nested checkboxes

Is there a better way to lay out this form?

  • is this a filter or a final step in a wizard? – Midas Jun 26 '17 at 18:10
  • A filter for items to be printed. – rickymetz Jun 26 '17 at 18:13
  • The horizontal divider is misleading. – jamesdlin Jun 27 '17 at 2:08
  • @rickymetz what happens when I select Only answers type as an option. Will all the options inside it will be selected by default? or none of them? – NB4 Jun 27 '17 at 8:57
  • @NB4 presently no options are selected by default. – rickymetz Jun 27 '17 at 11:45

Use the 'expose within' radio buttons pattern

What you have is actually okay, but hide the checklists (or any other dynamic content) as Cody Reeves suggested here.

Luke W reviews this pattern in his book Web Form Design.

Here's an example from Chris Coyier's Codepen job form.

expose within radio buttons

If you adjust your design, you could probably get rid of the gray line underneath the last radio button. It makes the checkboxes look separate from the choice they belong to.

[1]: https://codepen.io/job/new


One solution would be to hide the checkboxes until the 'Only answer type(s)' radio is checked. This would ease most of the confusion the user may have with the current form, as they wont be offered all the options all at once until it is necessary.

  • I would recommend disabling via dimmed checkboxes and text or whatever visual cues, rather than fully hiding it. "Only answer types" standing alone doesn't make much sense, and users may not click it without knowing what options are available to it. – DasBeasto Jun 26 '17 at 20:22
  • @DasBeasto a good observation on the labels: perhaps he can revisit his wording to make it clearer. – Mike M Jun 27 '17 at 1:57

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.