Chiralkit
← 全部 UI 规范

组件契约

input

原生 <input>，封装为设计系统的自定义元素——支持 text/email/password/search/tel/url/number 类型，用 invalid+describedBy 表示错误状态，并在每次按键时发出携带当前值的 dsInput。

版本
v1.0.0

Props

名称类型取值默认值
valuestring——
namestring——
typeenumtext, email, password, search, tel, url, numbertext
placeholderstring——
disabledboolean—false
requiredboolean—false
invalidboolean—false
describedBystring——
labelstring——
sizeenummd, lgmd

事件

名称载荷条件
dsInputstring—

Token

spacing
primitive.spacing.sm, primitive.spacing.md, primitive.spacing.lg, primitive.spacing.xl
radius
primitive.radius.sm, primitive.radius.md
font
primitive.font.family, primitive.font.size-md

无障碍

native_element
input
labeling
aria-label via the label prop (canonical) or ambient <label> wrapper (secondary, browser-computed accessible name).
keyboard
["Tab focuses","Printable characters insert at caret","Backspace/Delete edit natively","Arrow keys move caret (Up/Down step numeric value when type=number)","Enter may submit the enclosing form for type=search"]
disabled_semantics
native_disabled_attribute
error_semantics
aria-invalid (from `invalid` prop) + aria-describedby (from `describedBy` prop, expected to point at a light-DOM node id containing the error message)
required_semantics
aria-required (from `required` prop); visual asterisk is the consumer's responsibility
notes
label prop is REQUIRED for WCAG conformance — an <input> with no accessible name is an axe `label` violation. `placeholder` is a hint, not a label — always pair with `label`. `autocomplete` is intentionally not exposed in v1; consumers that need password-manager hints for password fields can render a native <input> for that field until the prop is added.
经过校验的原始 JSON
{
  "name": "input",
  "version": "1.0.0",
  "props": {
    "value": {
      "type": "string"
    },
    "name": {
      "type": "string"
    },
    "type": {
      "type": "enum",
      "values": [
        "text",
        "email",
        "password",
        "search",
        "tel",
        "url",
        "number"
      ],
      "default": "text"
    },
    "placeholder": {
      "type": "string"
    },
    "disabled": {
      "type": "boolean",
      "default": false
    },
    "required": {
      "type": "boolean",
      "default": false
    },
    "invalid": {
      "type": "boolean",
      "default": false
    },
    "describedBy": {
      "type": "string"
    },
    "label": {
      "type": "string"
    },
    "size": {
      "type": "enum",
      "values": [
        "md",
        "lg"
      ],
      "default": "md"
    }
  },
  "events": {
    "dsInput": {
      "payload": "string"
    }
  },
  "tokens_used": {
    "spacing": [
      "primitive.spacing.sm",
      "primitive.spacing.md",
      "primitive.spacing.lg",
      "primitive.spacing.xl"
    ],
    "radius": [
      "primitive.radius.sm",
      "primitive.radius.md"
    ],
    "font": [
      "primitive.font.family",
      "primitive.font.size-md"
    ]
  },
  "a11y": {
    "native_element": "input",
    "labeling": "aria-label via the label prop (canonical) or ambient <label> wrapper (secondary, browser-computed accessible name).",
    "keyboard": [
      "Tab focuses",
      "Printable characters insert at caret",
      "Backspace/Delete edit natively",
      "Arrow keys move caret (Up/Down step numeric value when type=number)",
      "Enter may submit the enclosing form for type=search"
    ],
    "disabled_semantics": "native_disabled_attribute",
    "error_semantics": "aria-invalid (from `invalid` prop) + aria-describedby (from `describedBy` prop, expected to point at a light-DOM node id containing the error message)",
    "required_semantics": "aria-required (from `required` prop); visual asterisk is the consumer's responsibility",
    "notes": "label prop is REQUIRED for WCAG conformance — an <input> with no accessible name is an axe `label` violation. `placeholder` is a hint, not a label — always pair with `label`. `autocomplete` is intentionally not exposed in v1; consumers that need password-manager hints for password fields can render a native <input> for that field until the prop is added."
  }
}
ChiralFM