Required Badge

Required Badge 组件用于标识必填字段或必需参数，通过红色徽章提供清晰的视觉提示。

Required必填Required Field

安装

使用方法

import { RequiredBadge } from "@/components/pivot/required-badge";

<RequiredBadge />

示例

基本用法

<div className="flex items-center gap-2">
  <span>用户名</span>
  <RequiredBadge />
</div>

自定义文本

<div className="space-y-2">
  <div className="flex items-center gap-2">
    <span>邮箱地址</span>
    <RequiredBadge>必填</RequiredBadge>
  </div>
 
  <div className="flex items-center gap-2">
    <span>密码</span>
    <RequiredBadge>Required</RequiredBadge>
  </div>
</div>

在表单中使用

<div className="space-y-4">
  <div>
    <label className="flex items-center gap-2 text-sm font-medium">
      用户名
      <RequiredBadge />
    </label>
    <input
      type="text"
      className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
      placeholder="请输入用户名"
    />
  </div>
 
  <div>
    <label className="flex items-center gap-2 text-sm font-medium">
      邮箱
      <RequiredBadge />
    </label>
    <input
      type="email"
      className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
      placeholder="请输入邮箱地址"
    />
  </div>
</div>

在 API 文档中使用

<div className="space-y-3">
  <div className="flex items-center gap-3 p-3 border rounded">
    <code className="font-mono">username</code>
    <TypeIndicator type="string" />
    <RequiredBadge />
    <span className="text-sm text-muted-foreground">用户的登录名</span>
  </div>
 
  <div className="flex items-center gap-3 p-3 border rounded">
    <code className="font-mono">email</code>
    <TypeIndicator type="string" />
    <RequiredBadge />
    <span className="text-sm text-muted-foreground">用户的邮箱地址</span>
  </div>
 
  <div className="flex items-center gap-3 p-3 border rounded">
    <code className="font-mono">age</code>
    <TypeIndicator type="number" />
    <span className="text-sm text-muted-foreground">用户年龄（可选）</span>
  </div>
</div>

API 参考

Props

属性	类型	默认值	描述
`children`	`React.ReactNode`	`"Required"`	徽章显示的文本
`className`	`string`	-	额外的 CSS 类名

设计原则

颜色选择

使用红色系配色方案，符合用户对"必填"的直觉认知
支持暗色主题，确保在不同主题下都有良好的对比度

尺寸设计

采用小尺寸设计（text-xs），不会过分抢夺注意力
适当的内边距确保文字清晰可读

最佳实践

一致性 - 在整个应用中保持必填标识的一致性
位置 - 通常放置在字段标签旁边，便于用户快速识别
语言 - 根据应用的语言环境选择合适的文本（"Required"、"必填"等）
可访问性 - 不仅依赖颜色，同时提供文字说明

无障碍性

提供明确的文字标识，不仅仅依赖颜色
支持屏幕阅读器
具有足够的颜色对比度
支持键盘导航

使用场景

表单验证 - 标识必填的表单字段
API 文档 - 标识必需的请求参数
配置界面 - 标识必需的配置项
数据表格 - 标识必填的数据列