@solid-aria/label

Labels provide context for user inputs.

Installation

npm install @solid-aria/label
# or
yarn add @solid-aria/label
# or
pnpm add @solid-aria/label

createLabel

Provides the accessibility implementation for labels and their associated elements. It associates a label with a field and automatically handles creating an id for the field and associates the label with it.

How to use it

import { AriaLabelProps, createLabel } from "@solid-aria/label";

interface ColorFieldProps extends AriaLabelProps {
  // your component specific props
}

function ColorField(props: ColorFieldProps) {
  const { labelProps, fieldProps } = createLabel(props);

  return (
    <>
      <label {...labelProps}>{props.label}</label>
      <select {...fieldProps}>
        <option>Indigo</option>
        <option>Maroon</option>
        <option>Chartreuse</option>
      </select>
    </>
  );
}

function App() {
  return <ColorField label="Favorite color" />;
}

By default, createLabel assumes that the label is a native HTML label element. However, if you are labeling a non-native form element, be sure to use an element other than a <label> and set the labelElementType prop appropriately.

Changelog

All notable changes are described in the CHANGELOG.md file.