Components

Label

Accessible form label built on a native HTML label element.

Category: Form / Standalone

Import

import { Label } from "@hareru/ui"

Exports

NameTypeDescription
LabelComponentMain label component
LabelPropsTypeProps interface

Types

export interface LabelProps
  extends React.LabelHTMLAttributes<HTMLLabelElement>,
    VariantProps<typeof labelVariants> {}

Key Props

PropTypeDefaultDescription
htmlForstring—Associates the label with a form control by id

Accessibility

  • Notes: Associates with input via htmlFor attribute.

Usage

import { Label, Input } from "@hareru/ui"

// Associate with an input
<Label htmlFor="email">Email address</Label>
<Input id="email" type="email" placeholder="you@example.com" />

// Within a FormField (id is injected automatically)
<FormField>
  <FormFieldLabel>Name</FormFieldLabel>
  <FormFieldControl>
    <Input placeholder="John Doe" />
  </FormFieldControl>
</FormField>

Notes

  • No visual variants — the component applies base hui-label styles.
  • When used inside FormField, prefer FormFieldLabel which injects htmlFor automatically from context.
  • All native HTMLLabelElement attributes are forwarded.

Textarea

Multi-line text input with error state support.

Select

Accessible dropdown select built on Base UI Select primitives.

On this page

ImportExportsTypesKey PropsAccessibilityUsageNotes