@react-aria/label

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 />