Label

Accessible label bound to a form control.

Installation

Terminal

npx magic-native-ui@latest add label

Usage

The example running in the preview above. Imports use the default aliases from components.json.

label-demo.tsx

import { View } from 'react-native'

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

export function LabelDemo() {
  return (
    <View className="w-full gap-1.5">
      <Label nativeID="username">Username</Label>
      <Input placeholder="shadcn" aria-labelledby="username" autoCapitalize="none" />
    </View>
  )
}

Component source

What the CLI copies into your project. Once it is there, the code is yours to edit.

registry/ui/label.tsx

import { Text as RNText } from 'react-native'

import { cn } from '@/registry/lib/utils'

type LabelProps = React.ComponentProps<typeof RNText>

/**
 * React Native has no `<label for>`: bind a label to its control by giving the
 * label a `nativeID` and pointing the control's `aria-labelledby` at it. `Text`
 * takes an `onPress` of its own if you want the label to act on the control.
 */
function Label({ className, ...props }: LabelProps) {
  return (
    <RNText
      className={cn('text-sm font-medium leading-none text-foreground', className)}
      {...props}
    />
  )
}

export { Label }
export type { LabelProps }