Label

Installation#

pnpm dlx shadcn@latest add @zui/label

The CLI writes components/ui/label.tsx, installs Text and Utils, and adds @rn-primitives/label.

Usage#

import { useRef } from 'react';
import type { TextInputInstance } from 'react-native';

import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

const input = useRef<TextInputInstance>(null);

<Label nativeID="email-label" onPress={() => input.current?.focus()}>
  Email
</Label>
<Input ref={input} aria-label="Email" aria-labelledby="email-label" />

React Native has no link between a label and its field. On Android a field takes the label's text as its name when its aria-labelledby holds the label's nativeID. iOS ignores aria-labelledby, so give the field the same name in aria-label as well. Pressing a Label runs only its onPress, so point that at the field's focus().

API reference#

Label#

Takes every prop of the @rn-primitives/label root, plus:

disabled dims the label to match a disabled field. It does not block presses.