Park-UI 中如何优雅地为输入框添加错误状态样式

在 Park-UI 组件库中，输入框组件提供了一个 invalid 属性来标记输入值是否无效。本文将详细介绍如何正确地为输入框添加错误状态的可视化样式。

错误状态样式的基本实现

Park-UI 基于 PandaCSS 构建，我们可以通过扩展输入框的样式配方(recipe)来添加错误状态样式。在 PandaCSS 配置中，我们可以这样定义：

export default defineConfig({
  theme: {
    extend: {
      recipes: {
        input: {
          base: {
            _invalid: {
              borderColor: 'red.9',
              outline: '0 0 0 1px var(--colors-color-red-9)',
            }
          },
        },
      },
    },
  },
})

这段配置会在输入框处于无效状态时，为其添加红色边框和轮廓效果。

实际应用中的注意事项

虽然配置了样式，但直接使用 invalid 属性可能会遇到警告：

Warning: Received `true` for a non-boolean attribute `invalid`.

这是因为 HTML 标准中并没有 invalid 这个属性。正确的做法是使用 aria-invalid 属性：

<Input placeholder="请输入内容" aria-invalid />

自动验证与样式应用

Park-UI 的输入框组件会自动处理一些验证场景。例如，当使用 pattern 属性时，如果输入不符合正则表达式，组件会自动应用我们定义的错误样式：

<Input 
  name="username" 
  type="text" 
  pattern="[a-z]+"
  placeholder="只能包含小写字母"
/>

当用户输入大写字母时，输入框会自动显示错误样式。

进阶样式定制

我们可以进一步扩展错误状态的样式，使其更加丰富：

_invalid: {
  borderColor: 'red.9',
  outline: '0 0 0 1px var(--colors-color-red-9)',
  backgroundColor: { base: 'red.1', _dark: 'red.2' },
  color: 'red.11',
}

这样不仅会改变边框颜色，还会调整背景色和文字颜色，在深色模式下也有不同的表现。

最佳实践建议

1. 除了视觉反馈，还应该为屏幕阅读器用户提供错误提示
2. 考虑添加错误提示文本组件与输入框配合使用
3. 对于复杂的验证逻辑，可以结合表单库如 React Hook Form 使用
4. 保持错误状态样式在整个应用中一致

通过以上方法，我们可以在 Park-UI 中创建既美观又实用的输入框错误状态反馈，提升用户体验。