JGuang / JGuang UI
Components组件Base UIBase UI 组件

Label

Renders an accessible label associated with controls.

Partially translated: Chinese navigation, titles, descriptions, and common headings. The technical body is currently in English.
Loading JGuang UI example…

For form fields, use the Field component which includes built-in label, description, and error handling.

Installation

Command

Manual

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Install the following dependencies:

npm install @base-ui/react

Copy and paste the following code into your project.

View complete source: components/ui/label.tsx

Update the import paths to match your project setup.

Usage

import { Label } from "@/components/ui/label"
<Label htmlFor="email">Your email address</Label>

Label in Field

For form fields, use the Field component which includes built-in FieldLabel, FieldDescription, and FieldError components.

<Field>
  <FieldLabel htmlFor="email">Your email address</FieldLabel>
  <Input id="email" />
</Field>
Loading JGuang UI example…

RTL

To enable RTL support in JGuang UI, see the RTL configuration guide.

Loading JGuang UI example…

API Reference

See the Base UI Label documentation for more information.

Source: components/base/label.mdx

Technical documentation for JGuang UI.

On this page