@solid-aria/label
v0.1.4
Published
Primitives that provides the accessibility implementation for labels and their associated elements.
Downloads
4,470
Readme
@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.