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 '@rn-primitives/label';import * as React from 'react';import { cn } from '~/lib/utils';
const Label = React.forwardRef<LabelPrimitive.TextRef, LabelPrimitive.TextProps>( ({ 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/label';
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 |