How to make a label for?

[RWOverdijk]

I'm trying to make a label clickable (for web) to toggle a checkbox. Usually I'd use a label with a for attribute, but that doesn't seem possible.

I know I can make it work by using javascript, but I'd rather not. Any suggestions?

[mrzachnugent]

@RWOverdijk For the web, you need a nativeID on the <Label/> and a aria-labelledby on the <Checkbox/> (or <Input/>). There is only a need for javascript for the mobile platforms to maintain the same behaviour.

For example:

import * as React from 'react';
import { View } from 'react-native';
import { Checkbox } from '~/components/ui/checkbox';
import { Label } from '~/components/ui/label';

export default function CheckboxScreen() {
  const [checked, setChecked] = React.useState(false);
  return (
    <View className='flex-1 justify-center items-center p-6 gap-12'>
      <View className='flex-row gap-3 items-center'>
        <Checkbox aria-labelledby='terms' checked={checked} onCheckedChange={setChecked} />
        <Label
          nativeID='terms'
        >
          Accept terms and conditions
        </Label>
      </View>
    </View>
  );
}

Clicking the Label with toggle the checkbox on the web with this example.

[RWOverdijk]

@mrzachnugent I tried that first before asking here, but it does not work. I tried again and it still doesn't work. The (label) element renders as a div, and clicking it does nothing.

import { View } from "react-native";
import { Checkbox } from "~/components/ui/checkbox";
import { Label } from "~/components/ui/label";
import { useState } from "react";

export function Example() {
  const [remember, setRemember] = useState(false);
  const toggleRemember = () => setRemember(!remember);

  return (
    <View className="flex flex-row items-center">
      <View className="flex items-center flex-row">
        <Checkbox
          checked={remember}
          onCheckedChange={setRemember}
          aria-labelledby="remember"
          className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
        />
      </View>
      <View className="ml-3 text-sm">
        <Label
          nativeID="remember"
          // onPress={toggleRemember}
          className="text-gray-500 dark:text-gray-300"
        >
          Remember me
        </Label>
      </View>
    </View>
  );
}

I left the code I commented out on purpose to show you the workaround I had to use.

[mrzachnugent]

@RWOverdijk The example I posted above works for me.

If you check the first example here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby that's how it works, with the id (nativeID) and aria-labelledby

Can you provide a minimal reproduction repo?

[RWOverdijk]

Absolutely. I'll do that as soon as I get the chance. I already have a repro for the select in dialog issue, I'll add it there.

[RWOverdijk]

@mrzachnugent I have absolutely no idea how this can be working for you. Aria doesn't even influence input as far as I know, but I have copy pasted your exact code and updated the repro. https://github.com/RWOverdijk/rnr-portal-repro

Clicking the label still does nothing. Tried both firefox and chrome.

[mrzachnugent]

The Label primitive now has an htmlFor prop for the web only.