Description 描述

引入

import { Description } from '@heroui/react';

用法

API 参考

Description Props

Prop	类型	默认值	描述
className	string	-	额外的 Tailwind CSS 类。
children	ReactNode	-	Description 的内容。

无障碍

Description 组件通过以下方式增强无障碍：

• 使用语义化 HTML，屏幕阅读器可识别
• 提供 slot="description" 属性以便与 React Aria 集成
• 支持适宜的文本对比度

样式

Description 组件使用以下 CSS 类：

• .description - 基础 Description 样式，使用弱化（muted）文本颜色

示例

与表单字段一起使用

<div className="flex flex-col gap-1">
  <Label htmlFor="password">Password</Label>
  <Input id="password" type="password" aria-describedby="password-description" />
  <Description id="password-description">
    Must be at least 8 characters with one uppercase letter
  </Description>
</div>

与 TextField 集成

import {TextField, Label, Input, Description} from '@heroui/react';

<TextField type="email">
  <Label>Email</Label>
  <Input placeholder="Enter your email" />
  <Description>We'll never share your email</Description>
</TextField>

使用 TextField 组件时，无障碍属性会自动应用到 Label 与 Description 上。