Cutest UI 样式框架

一个简洁、美观的CSS样式框架，提供了丰富的UI组件和响应式设计。

表单组件

美观、易用的表单元素，支持多种输入类型和状态。

表单使用指南

基本用法

Cutest UI 表单采用基于 label 的统一结构，所有表单元素都使用 field 类进行包裹，确保一致的样式和用户体验。

<label class="field">
  <input type="text" placeholder="提示文本">
  <span class="label">标签文本</span>
</label>

表单组件类型

支持多种表单输入控件，满足不同数据收集需求：

  • 文本输入: <input type="text"> - 用于基本文本输入
  • 邮箱输入: <input type="email"> - 优化的邮箱格式输入，支持自动验证
  • 密码输入: <input type="password"> - 隐藏字符的安全输入
  • 文本区域: <textarea> - 支持多行文本输入
  • 下拉选择: <select> - 从预设选项中选择
  • 复选框: <input type="checkbox"> - 允许选择多个选项
  • 单选按钮: <input type="radio"> - 从互斥选项中选择一个
  • 开关按钮: 使用 <label class="field -toggle"><input type="checkbox"><span class="label">开关文本</span></label> 创建切换开关，支持选中、未选中、禁用等状态

表单状态

表单元素支持丰富的状态样式，提供直观的视觉反馈：

  • 默认状态: 标准的表单元素外观
  • :focus 状态: 获取焦点时的样式反馈，带有高亮效果和清晰的轮廓
  • :hover 状态: 鼠标悬停时的样式变化，提升可交互性感知
  • :disabled 状态: 禁用时的样式和行为，降低透明度并防止交互
  • :valid/:invalid 状态: 表单验证后的样式反馈，通过颜色区分输入是否有效

表单布局

通过组合使用以下类可以创建不同的表单布局，适应各种界面需求：

  • field: 基础表单字段容器，提供统一的内边距和布局
  • mb-*: 底部外边距，控制字段间距，支持响应式调整
  • grid: 创建网格布局的表单，实现多列排列
  • grid-cols-*: 控制网格布局的列数
  • gap-*: 控制网格项之间的间距

最佳实践

  • 为所有输入字段提供清晰的标签，使用 label 元素包裹输入控件以增强可访问性
  • 为必填字段添加明确的视觉提示（如红色星号）
  • 提供即时的表单验证反馈，帮助用户快速修正错误
  • 在移动设备上确保表单元素易于点击（建议最小尺寸 44×44px）
  • 使用语义化的输入类型（email、tel、url 等）以获得更好的移动设备体验
  • 在表单提交按钮附近提供清晰的操作指引
  • 对于长表单，考虑分组和分步骤填写的方式
  • 确保表单在不同设备上都能正常显示和使用

基础表单元素

选择控件

开关按钮

订阅表单组件

一个简洁、一体化的订阅输入确认表单元素，适用于邮件订阅、通知注册等场景。

订阅表单用法

订阅表单采用一体化设计，将输入框和提交按钮组合在同一个容器中，提供简洁的用户体验：

<div class="subscribe-form">
  <input type="email" placeholder="输入您的电子邮箱" required>
  <button type="submit" class="subscribe-button">订阅</button>
</div>
  • 支持标准的表单验证，可添加 required 属性确保必填
  • 响应式设计，适应不同屏幕尺寸
  • 包含悬停、聚焦和禁用状态的样式反馈

表单验证状态 (Styleguide 4.7)

根据验证结果动态显示相应状态的表单元素

用法说明

通过添加特定的CSS类到表单元素，实现验证状态的动态显示：

  • -valid - 验证成功状态
  • -error - 验证失败状态
  • -warning - 验证警告状态

<!-- 验证成功状态 -->
<label class="field -valid">
    <input type="text" value="有效的输入" />
    <span class="label">验证成功</span>
    <span class="validation-message">输入有效</span>
</label>

<!-- 验证失败状态 -->
<label class="field -error">
    <input type="text" value="无效的输入" />
    <span class="label">验证失败</span>
    <span class="validation-message">请输入有效的内容</span>
</label>
特性
  • 自动应用对应的边框颜色和背景色
  • 包含验证消息的样式
  • 聚焦状态下的视觉反馈
  • 支持文本输入、文本域和选择框

基础示例

用户名 用户名可用
电子邮箱 请输入有效的电子邮箱地址
密码 密码强度较低，建议使用8位以上包含字母和数字的密码

动态验证演示

用户名
电子邮箱
密码

订阅表单 (Styleguide 4.8)

一体化输入确认表单，适用于邮箱订阅等场景

基础示例

禁用状态

变体 - 不同文本的订阅按钮