Label

The Label component renders accessible text labels for form controls. It uses React Native's Text component with built-in styling for consistent typography and supports press interactions to focus associated inputs.

Preview

Installation

npx novaui-cli add label

Import

import { Label } from 'novaui-components'

Basic Usage

The Label component renders styled text suitable for form field labels:

import { Label } from 'novaui-components'

export function BasicLabel() {
  return <Label>Username</Label>
}

With Form Controls

With Input

Pair Label with an input field for an accessible form experience:

import { View } from 'react-native'
import { Label } from 'novaui-components'
import { Input } from 'novaui-components'

export function LabelWithInput() {
  return (
    <View className="gap-2">
      <Label>Email</Label>
      <Input placeholder="Enter your email" />
    </View>
  )
}

With Press Handler

Use the onPress prop to focus an associated input when the label is tapped:

import { useRef } from 'react'
import { View, TextInput } from 'react-native'
import { Label } from 'novaui-components'
import { Input } from 'novaui-components'

export function LabelWithPress() {
  const inputRef = useRef<TextInput>(null)

  return (
    <View className="gap-2">
      <Label onPress={() => inputRef.current?.focus()}>
        Click me to focus input
      </Label>
      <Input ref={inputRef} placeholder="I get focused" />
    </View>
  )
}

Props API

LabelProps

Extends React.ComponentPropsWithoutRef<typeof Text> and includes:

Best Practices

1. Always pair with inputs: Use Label alongside form controls like Input, Textarea, Select, and Checkbox for accessibility.

2. Keep labels concise: Labels should clearly describe the associated field in a few words.

3. Use press handlers: Connect onPress to focus the associated input for a better mobile experience.

4. Disabled states: When a form field is disabled, the label automatically reduces opacity via the peer-disabled:opacity-70 class on web.

Related Components

• Use Label with Input and Textarea for form fields
• Combine with Checkbox and Switch for toggle labels
• Pair with RadioGroup items for radio button labels
• Use within Field for structured form layouts