@react-aria/label

What is @react-aria/label?

@react-aria/label is a library that provides accessible labeling functionality for React components. It helps in associating labels with form elements and other interactive components, ensuring that they are accessible to screen readers and other assistive technologies.

What are @react-aria/label's main functionalities?

Labeling a form field

This feature allows you to associate a label with a form field, ensuring that the label is properly connected to the input element for accessibility.

import { useLabel } from '@react-aria/label';

function MyTextField(props) {
  let { labelProps, fieldProps } = useLabel(props);

  return (
    <div>
      <label {...labelProps}>{props.label}</label>
      <input {...fieldProps} />
    </div>
  );
}

<MyTextField label="Name" />

Custom labeling

This feature allows you to use custom elements for labels, such as a span, while still maintaining proper accessibility.

import { useLabel } from '@react-aria/label';

function CustomLabel(props) {
  let { labelProps, fieldProps } = useLabel(props);

  return (
    <div>
      <span {...labelProps}>{props.label}</span>
      <input {...fieldProps} />
    </div>
  );
}

<CustomLabel label="Email" />

Aria-labelledby

This feature allows you to use the aria-labelledby attribute to associate a label with an input element, which can be useful for more complex labeling scenarios.

import { useLabel } from '@react-aria/label';

function AriaLabeledByExample(props) {
  let { labelProps, fieldProps } = useLabel({ ...props, 'aria-labelledby': 'custom-label' });

  return (
    <div>
      <span id="custom-label">Custom Label</span>
      <input {...fieldProps} />
    </div>
  );
}

<AriaLabeledByExample />

Other packages similar to @react-aria/label

react-aria

react-aria is a library that provides a collection of React hooks for building accessible components. It includes hooks for managing focus, keyboard interactions, and more. While it offers broader functionality than @react-aria/label, it also includes labeling capabilities.

react-a11y

react-a11y is a library that helps in identifying and fixing accessibility issues in React applications. It provides tools for ensuring that components are accessible, including labeling form elements. However, it is more focused on auditing and fixing accessibility issues rather than providing hooks for building accessible components.

react-axe

react-axe is a library that integrates with the axe-core accessibility testing engine to automatically check for accessibility issues in React applications. While it does not provide labeling functionality directly, it helps developers identify and fix accessibility issues, including improper labeling.

README

@react-aria/label

This package is part of react-spectrum. See the repo for more details.