Label

Form field label for inputs and controls.

Enter your email...

Password

Enter your password...

Web preview — components render natively on iOS & Android

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

export function MyScreen() {
  return (
    <View>
      <Label>Email</Label>
      <Input placeholder="Enter your email..." />
    </View>
  );
}

Installation#

npx @aniui/cli add label

Usage#

app/index.tsx

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

export function MyScreen() {
  return (
    <View>
      <Label>Email</Label>
      <Input placeholder="Enter your email..." />
    </View>
  );
}

Props#

PropTypeDefault

className

string

—

Also accepts all Text props from React Native.

Accessibility#

Associates with form fields for screen readers.
Use with nativeID to link labels to their corresponding inputs.

Source#

components/ui/label.tsx

import React from "react";
import { Text } from "react-native";
import { cn } from "@/lib/utils";

export interface LabelProps extends React.ComponentPropsWithoutRef<typeof Text> {
  className?: string;
}
export function Label({ className, ...props }: LabelProps) {
  return (
    <Text
      className={cn("text-sm font-medium text-foreground leading-none", className)}
      {...props}
    />
  );
}

Previous← Kbd NextLabeled Separator →