Questions on Checkbox pattern

[snigam2024]

Background

Hi! I am a new joinee and still earning about the Design System. I am working on a project where there is an ask from the legal team to ask customers to intentionally opt-in for using AI features. So, there is a legal blurb and checkbox for them to opt in.
The legal team has proposed to swap the check box to be under the disclaimer blurb. I have attached a screenshot.

Feedback

In the paste design system I see he the checkbox to be above the disclaimer text. I want to know can we put the checkbox below the Disclaimer text? Also, the checkbox label will be- Enable [feature name]. Is this pattern fine to implement?

Stage of design

Mockups

Research

No response

Relevant links

No response

Are you looking for visual design support?

• Yes

Additional Information

No response

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Checkbox Disclaimer (updated: 08/12/2024, similarity score: 84%)
• AI chat log questions (updated: 08/19/2024, similarity score: 84%)
• Combobox help text (Office hours: Oct 8, 2020) (updated: 05/19/2023, similarity score: 84%)

[dosubot[bot]]

Hey @snigam2024! I'm here to assist you with any bugs, questions, or contributions. Let me know how I can help you with the Checkbox pattern.

In the Paste design system, it's important to ensure that a checkbox has a visible label in close proximity to the control for accessibility reasons. When displaying additional content based on checking a checkbox, the new content should appear after the checkbox to be naturally discoverable by assistive technology users ^[1].

However, if the legal team requires the checkbox to be below the disclaimer text, you should ensure that the checkbox is still clearly associated with its label and the disclaimer. This setup might not align with the typical pattern in Paste, but it can be implemented if it maintains accessibility and clarity.

For the checkbox label "Enable [feature name]," ensure it is descriptive and clearly indicates the action the user is opting into.

To continue talking to Dosu, mention @dosu.

[nkrantz]

Hey @snigam2024 - welcome and thanks for signing up for office hours! Just to get some background context, could you explain why the legal team is requiring the blurb to come before the Checkbox, rather than being a part of the Checkbox label? Thanks!

https://paste.twilio.design/components/checkbox#checkbox-disclaimer

[snigam2024]

I think the logic was that the user reads the disclaimer and then opts in.
Checking in with the Legal once again.
I found a checkbox pattern in the Figma file that has checkbox under Help text. Attaching the screenshot. I was able to make the Legal Blurb as requested with the component.

[nkrantz]

Thanks for coming to office hours today! You can find the recording in the #help-design-system channel in slack. Here's a figma showing how the desired disclaimer can be composed using a single checkbox. Let us know if you have any more questions!