Interactive Elements — Tab キーで移動して確認

フォーカスリングトークン

使い方

/* 全インタラクティブ要素に自動適用（グローバルルール） */
:focus-visible {
  outline: var(--ring-focus-width) solid var(--ring-focus-color);
  outline-offset: var(--ring-focus-offset);
}

/* カスタムコンポーネントにも同じトークンで統一 */
.my-widget:focus-visible {
  outline: var(--ring-focus-width) solid var(--ring-focus-color);
  outline-offset: var(--ring-focus-offset);
}

全6状態一覧

レイアウト規則 — ラベル→入力→メッセージの順序

フォーム状態トークン

ARIA パターン（コピー用）

<!-- エラー状態 -->
<div class="form-group">
  <label class="form-label" for="email">
    メールアドレス
    <span class="form-label-required" aria-hidden="true">*</span>
  </label>
  <input id="email" type="email" class="form-input error"
         aria-invalid="true" aria-describedby="email-error">
  <span id="email-error" class="form-message error" role="alert">
    <span class="form-message-icon" aria-hidden="true">⚠</span>
    有効なメールアドレスを入力してください
  </span>
</div>

<!-- 成功状態 -->
<div class="form-group">
  <label class="form-label" for="email">メールアドレス</label>
  <input id="email" type="email" class="form-input success"
         value="you@example.com" aria-describedby="email-ok">
  <span id="email-ok" class="form-message success">
    <span class="form-message-icon" aria-hidden="true">✓</span>
    確認済みのアドレスです
  </span>
</div>

状態一覧（上限 200文字）

文字数カウンタートークン

実装パターン（HTML + JS）

<!-- HTML -->
<div class="form-group">
  <label class="form-label" for="body">本文</label>
  <div class="textarea-wrapper">
    <textarea id="body" class="form-textarea"
              data-maxlength="200" rows="4"></textarea>
    <div class="char-counter" id="body-counter">
      <span class="char-counter-bar">
        <span class="char-counter-bar-fill" style="width:0%"></span>
      </span>
      <span class="char-counter-text">0 / 200</span>
    </div>
  </div>
</div>

<script>
function initCharCounter(textarea) {
  const max  = parseInt(textarea.dataset.maxlength, 10);
  const root = getComputedStyle(document.documentElement);
  const warnAt = parseFloat(
    root.getPropertyValue('--form-counter-warn-threshold').trim()
  ) || 0.8;

  const counter = document.getElementById(textarea.id + '-counter');
  const fill    = counter?.querySelector('.char-counter-bar-fill');
  const label   = counter?.querySelector('.char-counter-text');

  function update() {
    const len  = textarea.value.length;
    const pct  = len / max;
    const over = len > max;
    const warn = !over && pct >= warnAt;

    counter.className = 'char-counter' + (over ? ' over' : warn ? ' warn' : '');
    textarea.classList.toggle('error', over);
    textarea.classList.toggle('warn',  warn);
    if (fill)  fill.style.width = Math.min(pct * 100, 100) + '%';
    if (label) label.textContent =
      (over ? '⚠ ' : '') + len + ' / ' + max;
    textarea.setAttribute('aria-invalid', String(over));
  }

  textarea.addEventListener('input', update);
  update();
}

document.querySelectorAll('textarea[data-maxlength]')
  .forEach(initCharCounter);
</script>

サイズ規格 — sm / md / lg

ライブデモ — 入力でクリアボタン・フォーカスリングを確認

検索ボックストークン

実装パターン

<!-- sm: ツールバー・サイドバー内 -->
<div class="search-box search-sm"> ... </div>

<!-- md: 標準ページ検索 -->
<div class="search-box search-md"> ... </div>

<!-- lg pill elevated: ヒーロー / スポットライト -->
<div class="search-box search-lg search-pill search-elevated"> ... </div>

<!-- クリアボタン有効化 (JS) -->
input.addEventListener('input', () => {
  box.classList.toggle('has-value', input.value.length > 0);
});
clear.addEventListener('click', () => {
  input.value = '';
  box.classList.remove('has-value');
  input.focus();
});