The checkbox component is missing an indetermined icon.

[doodle-codes]

Description

After integrating your checkbox component, I observed that the UI library lacks specific styling for checkboxes in the indeterminate state. It would be beneficial to enhance the component structure by incorporating an additional dash icon to visually represent this state. Additionally, I noticed that your documentation currently lacks an illustrative example showcasing this particular checkbox state. Including such an example would provide users with a clearer understanding of the indeterminate state and its visual representation.

CodeSandbox/Snack link

No response

Steps to reproduce

To reproduce the issue. Just set the isIndetermined prop state to true in the Checkbox component.

gluestack-ui Version

1.0.4

Platform

• [X] Expo
• [X] React Native CLI
• [X] Next
• [X] Web
• [X] Android
• [X] iOS

Other Platform

No response

Additional Information

No response

[doodle-codes]

Can someone with the rights add a gluestack-style label to this open issue?

[sem4phor]

Furthermore the checkbox indicator just doesn't render the checkbox icon when the checkbox is in indeterminate state :/

One part of the fix is adjusting /gluestack-ui/packages/unstyled/checkbox/src/CheckboxIcon.tsx Line 20

- {isChecked && (
+ {isChecked || isIndeterminate && (

[Viraj-10]

@doodle-codes, Thanks for reporting issue. This issue is related to gluestack-ui to be specific @gluestack-ui/checkbox. So we won't add gluestack-style label. @sem4phor Thanks for suggestion. We will add this to our package.

[Viraj-10]

Hey @doodle-codes @doodle-codes, This can be achieved now with forceMount prop on checkbox icon. PR.