Form Field

An enterprise-grade form field component based on BrConfigProvider for global theme configuration. It supports multi-control integration, state linkage, and customizable layouts, making it seamless to integrate with inline forms like BrForm and BrTable.

Component Features

• 🎨 Theme Configuration: Inherits global theme settings (colors, rounded corners, sizes) via BrConfigProvider.
• 🔄 State Linkage: Automatically links label, border, and message colors based on the field's state (e.g., error, success).
• 📐 Flexible Layout: Supports positioning labels on the top, left, or right, along with customizable label widths.
• 🛠️ Customization: Easy to override default styles using TailwindCSS or custom class names.

Basic Usage

Displays a basic form field containing a label, control, and description.

Username

This is your public display name.

Example

Error State

Shows the coordinated color change effect of the label, border, and hint text when validation fails.

Email Address

Please enter a valid email address.

Example

Custom Layout

Supports displaying the label on the left or right side, and customizing the label width.

Push Notifications

Receive updates via email.

I have read and agree to the terms.

Example

State Linkage

Demonstrates disabled, readonly, and loading states. The label and description will automatically adjust their styles to match the state.

Disabled Field

This field and its label are disabled.

Readonly Field

This field cannot be modified.

Loading Field

Verifying availability...

Example

API Reference

BrFormField

Prop	Type	Default	Description
name	string	-	Field name, used for validation binding
label	string	-	Label text
description	string	-	Description message
error	string	-	Error message. Setting this will automatically enter the error state
state	'default' | 'error' | 'success' | 'warning'	'default'	Custom state
disabled	boolean	false	Whether the field is disabled
readonly	boolean	false	Whether the field is readonly
required	boolean	false	Whether the field is required (shows an asterisk)
hideRequiredAsterisk	boolean	false	Whether to hide the required asterisk
size	'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'	'md'	Field size, inherited from ConfigProvider
labelPosition	'top' | 'left' | 'right'	'top'	Label position
labelWidth	string | number	-	Label width (only effective when position is left or right)
loading	boolean	false	Whether to show a loading placeholder
isolated	boolean	false	Enable Shadow DOM for style isolation
zIndex	number	-	Layer index, automatically assigned by FormFieldManager by default

BrFormFieldLabel / BrFormFieldDescription / BrFormFieldMessage

Common attributes: Supports passing class for style overriding, and automatically injects state from formFieldContext.

FormFieldManager (Utility)

A singleton utility for managing global form field layering.

import { formFieldManager } from '@breeze-ui/vue/form-field'

// Get the next auto-incremented z-index
const zIndex = formFieldManager.nextZIndex()

// Reset the z-index base
formFieldManager.resetZIndex()