Checkbox Disclaimer

[dfcontreras10]

We (@davidbarrios-dev and other PN team members) are working on a wizard design for a new Phone Numbers self-service feature this quarter. We encountered an issue with the Checkbox Disclaimer component documented in the Paste UI Kit: Paste Components & Themes.

Upon review, David noticed that this component does not currently support the helper text variant, which is included in the UI Kit.

We’re unsure if this is a bug or an oversight. Could you please help us figure out how to implement the helper text variant, or let us know if there is an alternative solution?

Thank you!

[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:

• Adopt Paste component in MC product (updated: 05/30/2023, similarity score: 87%)
• Phone Number Input (updated: 06/24/2022, similarity score: 87%)
• Preventing incorrect characters vs. showing an error state - Answer (updated: 07/20/2022, similarity score: 86%)

[krisantrobus]

Hi @dfcontreras10, thanks for reaching out. This is the intended behavior when using the disclaimer instance of checkbox. The disclaimer text should be descriptive enough to not require any help text. We do however have a prop errorText which is what you are seeing in the design.

Usage is in this storybook and the code can be found here.

Were you looking for this instead of help text?

[dfcontreras10]

Not really, what I'm seeing in the UI Kit design is a Checkbox Disclaimer that supports a helper text inside the checkbox itself.

Screen.Recording.2024-08-02.at.10.07.31.AM.mov

Even the way the component is set up for use in Figma includes a toggle to enable and disable the helper text.

Unfortunately, using an error status outside the disclaimer won't address our use case effectively.

[krisantrobus]

Thanks @dfcontreras10 for clarifying. I dug into our code and I see that the helpText prop is being specifically omitted here. I raised this with the team and we are not sure why we did that so I'm going to expose this to get rid of any type errors.

This fix will be included in our next release. In the meantime setting the prop will actually be passed through and rendered correctly so you engineers can just add the following above the prop to ignore the type issue @ts-expect-error helpText is not a valid prop.

Just for our curoisity would you mind sharing the use case with @serifluous. Thank you!

[krisantrobus]

FYI here's the Jira ticket

[krisantrobus]

Hey @dfcontreras10 this has now been merged and will be included in the next package release.

[dfcontreras10]

Hey @krisantrobus, thank you so much for your support and assistance!

I'm looking forward to seeing this fix in the next release.