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 type { PressableRef, SlottablePressableProps, SlottableTextProps, TextRef,} from '~/components/primitives/types';import * as React from 'react';import { Text as RNText, View } from 'react-native';import type { LabelRootProps, LabelTextProps } from './types';
const Root = React.forwardRef< PressableRef, Omit<SlottablePressableProps, 'children' | 'hitSlop' | 'style'> & LabelRootProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.View : View; return <Component ref={ref} {...props} />;});
Root.displayName = 'RootWebLabel';
const Text = React.forwardRef<TextRef, SlottableTextProps & LabelTextProps>( ({ 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 type { PressableRef, SlottablePressableProps, SlottableTextProps, TextRef,} from '~/components/primitives/types';import * as React from 'react';import { Pressable, Text as RNText } from 'react-native';import type { LabelRootProps, LabelTextProps } from './types';
const Root = React.forwardRef< PressableRef, Omit<SlottablePressableProps, 'children' | 'hitSlop' | 'style'> & LabelRootProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.Pressable : Pressable; return <Component ref={ref} {...props} />;});
Root.displayName = 'RootNativeLabel';
const Text = React.forwardRef<TextRef, SlottableTextProps & LabelTextProps>( ({ 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 { ViewStyle } from 'react-native';
interface LabelRootProps { children: React.ReactNode; style?: ViewStyle;}
interface LabelTextProps { /** * Equivalent to `id` so that the same value can be passed as `aria-labelledby` to the input element. */ nativeID: string; /** * WEB ONLY */ htmlFor?: string;}
export type { LabelRootProps, LabelTextProps };Copy/paste the following code for exporting to ~/components/primitives/label/index.ts
export * from './label';Copy/paste the following code for native to ~/components/primitives/label/index.tsx
import * as Slot from '~/components/primitives/slot';import type { PressableRef, SlottablePressableProps, SlottableTextProps, TextRef,} from '~/components/primitives/types';import * as React from 'react';import { Pressable, Text as RNText } from 'react-native';import type { LabelRootProps, LabelTextProps } from './types';
const Root = React.forwardRef< PressableRef, Omit<SlottablePressableProps, 'children' | 'hitSlop' | 'style'> & LabelRootProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.Pressable : Pressable; return <Component ref={ref} {...props} />;});
Root.displayName = 'RootNativeLabel';
const Text = React.forwardRef<TextRef, SlottableTextProps & LabelTextProps>( ({ 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 { ViewStyle } from 'react-native';
interface LabelRootProps { children: React.ReactNode; style?: ViewStyle;}
interface LabelTextProps { /** * Equivalent to `id` so that the same value can be passed as `aria-labelledby` to the input element. */ nativeID: string; /** * WEB ONLY */ htmlFor?: string;}
export type { LabelRootProps, LabelTextProps };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 |