Display a user's selected checkbox options for a category field type in a front-end Edit Profile form

Question

I have a user field called "designOptions" that is a Categories Checkbox field type. I have this field in the Edit Profile front-end form so that the user can see the saved options that they had selected previously (if any) and then change or add to those selections in the Edit Profile form. I am having a hard time finding anything in the documentation or SE about how to display all of the user's category checkbox options while displaying the options that are already selected in their account for that field. This is what I have so far, but it is checking all category options instead of just the 4 that the user has selected - likely because the length conditional is only looking at whether this field has 'any' value and not checking the value of each option.

I would appreciate any guidance you can give on the best way to do this. :)

Thank you!

{# Grab all categories in the group and set variable. #}
{% set categories = craft.categories.group('designCategories') %}

{# Grab the categories that the user already selected #}
{% set userOptions = user.designOptions %}

{# Display all category checkboxes in the form, with the logged in user's saved selections already checked.#}
{% for category in categories %}
    <input type="checkbox" id="designOptions" name="fields[designsOptions][]" {% if userOptions | length %}checked{% endif %} value=" {{ category.id }}"> {{ category.title }}</input>
{% endfor %}

Answer 1

Try something like this (completely untested):

{# Grab all categories in the group and set variable. #}
{% set categories = craft.categories.group('designCategories') %}

{# Grab the categories Ids that the user already selected #}
{% set userOptionIds = user.designOptions.limit(null).ids() %}

{# Display all category checkboxes in the form, with the logged in user's saved selections already checked.#}
{% for category in categories %}
    <input type="checkbox" id="designOptions" name="fields[designsOptions][]" {% if category.id in userOptionIds %}checked{% endif %} value=" {{ category.id }}">
        {{ category.title }}
    </input>
{% endfor %}

Answer 2

I realize this thread has an accepted answer, but I wanted to provide another solution I was able to come up with because of the answer Brad provided. In my example, I am working with a plugin, but the twig/html is the same plugin or not.

Answer 3

This answer was incredibly helpful in creating a dropdown solution for my scenario of selecting a school from a category for a user profile on a front end form. It's structured nearly identically as above but as a dropdown selector.

<div class="form-group">
    <label>School Attended</label>
    {% set categories = craft.categories.group('school').all() %}
    {% set userOptionIds = currentUser.schoolAttended.limit(null).ids() %}
        <select name="fields[schoolAttended][]" class="form-control">
        {% for category in categories %}
            <option id="schoolAttended" name="fields[schoolAttended][]" {% if category.id in userOptionIds %}selected{% endif %} value=" {{ category.id }}">
            {{ category.title }}
            </option>
        {% endfor %}
        </select>
</div>

I hope this helps someone else find the answer they need but I'm also open to suggestions that may improve the result.