Label
Label
Demo
A user-friendly label linked to controls for improved accessibility.
Installation
npx @react-native-reusables/cli@latest add labelCopy/paste the following code to ~/components/ui/label.tsx:
import * as LabelPrimitive from '~/components/primitives/label';import * as React from 'react';import { cn } from '~/lib/utils';
const Label = React.forwardRef< React.ElementRef<typeof LabelPrimitive.Text>, React.ComponentPropsWithoutRef<typeof LabelPrimitive.Text>>(({ className, onPress, onLongPress, onPressIn, onPressOut, ...props }, ref) => ( <LabelPrimitive.Root className='web:cursor-default' onPress={onPress} onLongPress={onLongPress} onPressIn={onPressIn} onPressOut={onPressOut} > <LabelPrimitive.Text ref={ref} className={cn( 'text-sm text-foreground native:text-base font-medium leading-none web:peer-disabled:cursor-not-allowed web:peer-disabled:opacity-70', className )} {...props} /> </LabelPrimitive.Root>));Label.displayName = LabelPrimitive.Root.displayName;
export { Label };Usage
import { label } from '~/components/ui/checkbox';
function Example() { return <Label nativeID='name'>Name</Label>}Props
Label
Extends Text props
| Prop | Type | Note |
|---|---|---|
| nativeID* | string | the same value needs be use by aria-labelledby from form field |