Checkboxes with no children

[vankhoawin]

Hello team, we currently have a table that has checkbox functionality. children is a required prop, so when implementing with TypeScript, the component must be prefixed with a @ts-ignore.. Would it be possible to relax the constraints to optionally have children?

[richbachman]

Hey @vnguyen94. I've shared this with the team to gather some ideas. We'll be back in touch as soon as we can.

[richbachman]

Hey @vnguyen94. The problem with allowing a checkbox to have optional children is accessibility. An accessible text label is a hard requirement for checkboxes.

Luckily, we do have a way a to accomplish what you're after with Paste. You can use the ScreenReaderOnly component as the Checkbox children. This checks-off the accessibility requirement, as well as hiding the text to all but screen readers. Here's a quick example: https://codesandbox.io/s/busy-frog-cm7dc?file=/src/index.tsx

[vankhoawin]

Oh that's awesome, didn't know you could do that! Two follow-ups:

1. If a checkbox is used in a table column like in the example and codesandbox, does the table header also need a <ScreenReaderOnly>description</ScreenReaderOnly>?
2. This info might be good to capture in the Paste Checkbox docs. Haven't done it myself before, but would I just update this file? https://github.com/twilio-labs/paste/blob/main/packages/paste-website/src/pages/components/checkbox/index.mdx

[richbachman]

If a checkbox is used in a table column like in the example and codesandbox, does the table header also need a description?

Yep. Exactly. It'd need to read something like "select all rows" or something like that so it clear defines what will happen when it's checked.

This info might be good to capture in the Paste Checkbox docs. Haven't done it myself before, but would I just update this file? https://github.com/twilio-labs/paste/blob/main/packages/paste-website/src/pages/components/checkbox/index.mdx

Also yes. You just need to edit that file. I don't think you'll be able to run the website locally because of a couple missing env variables, so if that's a hurdle I can work on adding some content to the checkbox docs page. You could also edit via Github, and the docs preview should still work on the PR.

[vankhoawin]

Ok, maybe I'll leave it to you to add the content or a JIRA ticket for the future, since it's nothing too huge. Thanks again appreciate it!