For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.4.1/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.4.1/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.4.1/components/color-swatches.md.

颜色样本

以原生单选或复选输入表达有限、可命名的颜色集合,并让选择状态在色彩之外仍然清楚。

实时预览

用法

<fieldset class="color-swatches" aria-label="Accent color">
  <label><input type="radio" name="accent" checked aria-label="A3S 蓝" /><span data-swatch style="--swatch-color:#1456f0"></span></label><label><input type="radio" name="accent" aria-label="紫罗兰" /><span data-swatch style="--swatch-color:#5b57d9"></span></label>
</fieldset>

契约

接口值
根选择器.color-swatches
原生根元素<fieldset>
状态ready, disabled, invalid
事件change, input
方法—

产品边界

颜色样本不适合任意颜色输入、主题预览或只靠色相区分的状态。任意取色应交给宿主的专业颜色工具。

组件只发布可复用的交互边界。数据获取、持久化、权限、可信内容与业务实体继续由宿主产品拥有。

可访问性

每个样本必须有可访问名称,选中态具有轮廓和原生输入状态,低视力用户不需要识别色名即可完成选择。