Label
An accessible label associated with a form control.
- Chromium
- Firefox
- WebKit
- WCAG 2.2 AA
Preview
Email
import { Input } from "@moe-ui/registry/components/ui/input";
import { Label } from "@moe-ui/registry/components/ui/label";
import { View } from "react-native";
export default function LabelPreview() {
return (
<View className="w-full max-w-sm items-start gap-1.5">
<Label nativeID="email">Email</Label>
<Input aria-labelledby="email" placeholder="Enter email" />
</View>
);
}
One command, your source
Installation
pnpm dlx @moe-ui/cli@beta add labelUsage
The CLI installs editable source into your application. Import the component from your configured UI directory:
import { Label } from "@/components/ui/label";Variants and composition
Compound parts and variants remain regular source in your project, so you can change them without wrapping a package API.
Public API
The canonical source panel below lists every public export, dependency, and the complete implementation shipped by the registry.
Keyboard and accessibility
Associate the control with a visible label. Keyboard focus, disabled state, and validation semantics are covered by the web test matrix.
Browser support
This beta is release-tested in Chromium, Firefox, and WebKit in light and dark themes. See the web compatibility matrix for the current gate.
Nothing hiddenCanonical source and public exports1 exports
Label"use client";
import { cn } from "../../lib/utils";
import * as LabelPrimitive from "@rn-primitives/label";
import { Platform } from "react-native";
function Label({
className,
onPress,
onLongPress,
onPressIn,
onPressOut,
disabled,
...props
}: LabelPrimitive.TextProps & React.RefAttributes<LabelPrimitive.TextRef>) {
return (
<LabelPrimitive.Root
className={cn(
"flex select-none flex-row items-center gap-2",
Platform.select({
web: "cursor-default leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
}),
disabled && "opacity-50",
)}
onPress={onPress}
onLongPress={onLongPress}
onPressIn={onPressIn}
onPressOut={onPressOut}
disabled={disabled}
>
<LabelPrimitive.Text
className={cn(
"text-foreground text-sm font-medium",
Platform.select({ web: "leading-none" }),
className,
)}
{...props}
/>
</LabelPrimitive.Root>
);
}
export { Label };