Label Primitive
A user-friendly label linked to controls for improved accessibility.
Installation
Install the component via your command line.
npx expo install @rn-primitives/labelInstall @radix-ui/react-label
npx expo install @radix-ui/react-labelCopy/paste the following code for web to ~/components/primitives/label/label.web.tsx
import * as Label from '@radix-ui/react-label';import * as Slot from '~/components/primitives/slot';import * as React from 'react';import { Pressable, Text as RNText } from 'react-native';import type { RootProps, RootRef, TextProps, TextRef } from './types';
const Root = React.forwardRef<RootRef, RootProps>(({ asChild, tabIndex = -1, ...props }, ref) => { const Component = asChild ? Slot.Pressable : Pressable; return <Component ref={ref} tabIndex={tabIndex} {...props} />;});
Root.displayName = 'RootWebLabel';
const Text = React.forwardRef<TextRef, TextProps>( ({ asChild, nativeID, htmlFor, ...props }, ref) => { const Component = asChild ? Slot.Text : RNText; return ( <Label.Root asChild={!htmlFor} id={nativeID} htmlFor={htmlFor}> <Component ref={ref} {...props} /> </Label.Root> ); });
Text.displayName = 'TextWebLabel';
export { Root, Text };Copy/paste the following code for native to ~/components/primitives/label/label.tsx
import * as Slot from '~/components/primitives/slot';import * as React from 'react';import { Pressable, Text as RNText } from 'react-native';import type { RootProps, RootRef, TextProps, TextRef } from './types';
const Root = React.forwardRef<RootRef, RootProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.Pressable : Pressable; return <Component ref={ref} {...props} />;});
Root.displayName = 'RootNativeLabel';
const Text = React.forwardRef<TextRef, TextProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.Text : RNText; return <Component ref={ref} {...props} />;});
Text.displayName = 'TextNativeLabel';
export { Root, Text };Copy/paste the following code for types to ~/components/primitives/label/types.ts
import type { PressableRef, SlottablePressableProps, SlottableTextProps, TextRef,} from '~/components/primitives/types';import type { ViewStyle } from 'react-native';
type RootProps = Omit<SlottablePressableProps, 'children' | 'hitSlop' | 'style'> & { children: React.ReactNode; style?: ViewStyle;};
type TextProps = SlottableTextProps & { /** * Equivalent to `id` so that the same value can be passed as `aria-labelledby` to the input element. */ nativeID?: string; /** * WEB ONLY */ htmlFor?: string;};
type RootRef = PressableRef;
export type { RootProps, RootRef, TextProps, TextRef };Copy/paste the following code for exporting to ~/components/primitives/label/index.ts
export * from './label';export * from './types';Copy/paste the following code for native to ~/components/primitives/label/index.tsx
import * as Slot from '~/components/primitives/slot';import * as React from 'react';import { Pressable, Text as RNText } from 'react-native';import type { RootProps, RootRef, TextProps, TextRef } from './types';
const Root = React.forwardRef<RootRef, RootProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.Pressable : Pressable; return <Component ref={ref} {...props} />;});
Root.displayName = 'RootNativeLabel';
const Text = React.forwardRef<TextRef, TextProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.Text : RNText; return <Component ref={ref} {...props} />;});
Text.displayName = 'TextNativeLabel';
export { Root, Text };Copy/paste the following code for types to ~/components/primitives/label/types.ts
import type { PressableRef, SlottablePressableProps, SlottableTextProps, TextRef,} from '~/components/primitives/types';import type { ViewStyle } from 'react-native';
type RootProps = Omit<SlottablePressableProps, 'children' | 'hitSlop' | 'style'> & { children: React.ReactNode; style?: ViewStyle;};
type TextProps = SlottableTextProps & { /** * Equivalent to `id` so that the same value can be passed as `aria-labelledby` to the input element. */ nativeID?: string; /** * WEB ONLY */ htmlFor?: string;};
type RootRef = PressableRef;
export type { RootProps, RootRef, TextProps, TextRef };Usage
import * as LabelPrimitive from '@rn-primitives/label';
function Example() { const [checked, setChecked] = React.useState(false); return ( <Label.Root> <Label.Text nativeID='to-be-use-by-aria-labelledby-from-form-field' > Label </Label.Text> </Label.Root> );}Props
Root
Extends Pressable props except children | hitSlop | style
| Prop | Type | Note |
|---|---|---|
| children* | React.ReactNode | |
| style | ViewStyle | (optional) |
Text
Extends Text props
| Prop | Type | Note |
|---|---|---|
| nativeID* | string | the same value needs be use by aria-labelledby from form field |
| htmlFor | string | web only |