@base-ui-components/react/esm/field/label/useFieldLabel.js

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

'use client';

import * as React from 'react';
import { mergeReactProps } from '../../utils/mergeReactProps.js';
import { useFieldRootContext } from '../root/FieldRootContext.js';
export function useFieldLabel() {
  const {
    controlId,
    labelId
  } = useFieldRootContext();
  const getLabelProps = React.useCallback((externalProps = {}) => mergeReactProps(externalProps, {
    id: labelId,
    htmlFor: controlId,
    onMouseDown(event) {
      const selection = window.getSelection();

      // If text is selected elsewhere on the document when clicking the label, it will not
      // activate. Ensure the selection is not the label text so that selection remains.
      if (selection && !selection.anchorNode?.contains(event.currentTarget)) {
        selection.empty();
      }
      event.preventDefault();
    }
  }), [controlId, labelId]);
  return React.useMemo(() => ({
    getLabelProps
  }), [getLabelProps]);
}