Field

Field container component - integrates labels, inputs, descriptions and error messages

案例展示

Field 组件在实际场景中的使用示例

基础字段

Username

必填字段

Email Address*

We won't share your email

带帮助文本

Password

At least 8 characters, including letters and numbers

错误状态

Email Address*

Please enter a valid email address

完整表单示例

Name*

Email*

Used for notifications

Phone

Optional

Regular 形状

使用标准圆角的字段样式

标准圆角表单

Full Name*

Company

Your organization or business name

Website

内联标签样式

Username

Bio

Brief description for your profile

覆盖样式

通过 className 自定义字段外观

紧凑样式

Username

Password

大号样式

Your Email

We'll use this to send you updates

带背景色的字段

Project Name*

Choose a unique name for your project

Featured Tag

This tag will be highlighted

带前缀后缀的字段

Website URL

https://

Price

$USD

Social Handle

Your Twitter or Instagram handle

错误状态变体

不同风格的错误提示

Email*

Please enter a valid email address

Password*

Password must be at least 8 characters

Username*

This username is already taken

Phone Number*

Please enter a valid phone number

状态

Field 组件的不同状态

Label

Normal

Label*

Required

Label

Help text

With Description

Label

Error message

Error

组件结构

Field 由多个子组件组成

Field

Container

FieldLabel

Label with required indicator

FieldDescription

Helper text

FieldError

Error message