react-aria hooks useCheckbox with separate label

[Shadowlauch]

Hello everyone,

I have been trying to implement a Checkbox with the react-aria hooks that has the label separated. As in the input and everything is not nested within the label element.

<input id="test-input" />
<div />
<label for="test-input" />

Obviously a very simplified example.

I want to separate them to have greater freedom in styling. Linking the input and the now separated label was super easy, with the useLabel hook, but making the control, a styled div that looks like a checkbox, have all the event listener it needs, is not. The labelProps property from the useCheckbox hook has all the required event handlers, but since that is typed as LabelHTMLAttributes<HTMLLabelElement> applying them to a div throws a Typescript error and also indicates to me that that is not the correct way to go about this. I have tried finding other solutions to this, but have come up short.

Does react-aria support having the checkbox control separate from the label and if yes, how would I go about getting that setup?

[reidbarber]

I think this is a case where you'll just want to override typescript.

<div {...labelProps as React.HTMLAttributes<HTMLElement>}>...</div>

labelProps just contains press handlers from usePress, so it should be fine. I would just test your component on a variety of devices, including touch screens and assistive tech, to ensure it still has a good experience. And be sure the input is still labelled via aria-labelledby.