Label

<HStack align="center" gap={2}>  <Checkbox id="terms" />  <Label htmlFor="terms">Accept terms and conditions</Label></HStack>

Usage

import { Label } from "@reva/ui";

<Label htmlFor="email">Your email address</Label>

Associate the label with a control by setting htmlFor on Label to the same value as the control’s id. See shadcn Label for the upstream mental model.

For structured form fields (stacked controls, helper copy, validation), prefer the Field compound component and its built-in FieldLabel, FieldDescription, and FieldError instead of using bare Label for those layouts—Field is the right primitive for full field chrome; use Label directly for lightweight pairings such as checkbox + label or ad-hoc associations.

Examples

With input

For a single text control, pair Label above or beside Input. For multiple fields with consistent spacing and optional descriptions or errors, use Field instead of repeating Label + Input stacks by hand.

<VStack className="w-full max-w-sm" gap={2}>  <Label htmlFor="pw">Password</Label>  <Input id="pw" type="password" /></VStack>

Multiple fields

<VStack className="w-full max-w-sm" gap={4}>  <VStack gap={2}>    <Label htmlFor="f-name">First name</Label>    <Input id="f-name" />  </VStack>  <VStack gap={2}>    <Label htmlFor="f-name2">Last name</Label>    <Input id="f-name2" />  </VStack></VStack>

Props

Label forwards props to Radix Label (LabelPrimitive.Root). See the Radix UI Label documentation for the full API.