コンテンツにスキップ
Hypermedia Components

ラジオ

hc-radio は標準の <input type="radio"> に適用します。土台の input は ネイティブの挙動をすべて保ちます — 矢印キーは同じ name を共有する グループのメンバー間を移動し、選択された値はフォーム送信に参加し、 スクリーンリーダーはグループ内の位置(「5 個中 3 個目」)を読み上げ ます。appearance: none で置き換わるのは描画だけです。

基本の HTML

Section titled “基本の HTML”

同じ name を持つラジオは単一選択のグループを形成します。ブラウザ ネイティブの矢印キーナビゲーションは自動で機能します。隣接しない input を視覚的にまとめたいのでない限り、role="radiogroup" や ロービングタブインデックスの JS を足す必要はありません。

バリアント

Section titled “バリアント”

data-variant は、チェック時のデフォルト以外の塗り色として success、warning、error を受け付けます。デフォルト(省略)の バリアントはアクティブなカラーテーマの primary の塗りを使います。

サイズ

Section titled “サイズ”

data-size は sm、md(デフォルト)、lg を受け付けます。 data-density とは独立です — 専用の --hc-radio-{sm,lg}-size 変数は 密度階層をまたいで固定のままです。

data-size外形寸法
sm0.875rem(14 px)
md1.125rem(18 px)— デフォルト
lg1.375rem(22 px)

状態

Section titled “状態”

hc-field によるグルーピング

Section titled “hc-field によるグルーピング”

フォームレイアウトでは、グループを hc-field で包み、 ラベルとバリデーションメッセージをラジオ間で共有します。

Notification frequency

You can change this any time in settings.

<fieldset> + <legend> は、関連するラジオをグルーピングする セマンティックなプリミティブです。hc-field がそれらを他のフォーム パターンと一貫してスタイルします。

htmx での利用

Section titled “htmx での利用”

ラジオの変更も、他の入力と同様に htmx リクエストを駆動できます。

<label class="hc-radio-label">
  <input
    class="hc-radio"
    type="radio"
    name="layout"
    value="grid"
    data-hx-post="/prefs/layout"
    data-hx-trigger="change">
  Grid
</label>

アクセシビリティ

Section titled “アクセシビリティ”
  • このコンポーネントはネイティブの <input type="radio"> を保つため、 支援技術は正しく読み上げ、グループ内の位置を公開し、矢印キーが メンバー間でフォーカスを動かします。
  • ラジオは同じ name を与えてグルーピングします。視覚的なグルーピング も重要です — 関連するラジオは <legend> つきの <fieldset> で 包んでください。
  • バリデーションエラーでは、該当する input に aria-invalid="true" を 設定します。
  • ラジオが操作不能であるべきときはネイティブの disabled 属性を選び、 フォーカス可能であり続けるべきときだけ aria-disabled="true" を 使ってください。
  • フォーカスのアウトラインを消さないでください。このコンポーネントは デフォルトのアウトラインを、--hc-color-focus-ring で駆動される 見える box-shadow リングに置き換えています。

テーマ用トークン

Section titled “テーマ用トークン”

component トークン(component.tokens.json):

トークンパス用途
radio.size外形寸法(円)。
radio.border / border-width未チェック状態の枠線。
radio.bg未チェック状態の背景。
radio.checked-bg / checked-borderデフォルトバリアントのチェック色。
radio.success-checked-bg / success-checked-borderdata-variant="success"。
radio.warning-checked-bg / warning-checked-borderdata-variant="warning"。
radio.error-checked-bg / error-checked-borderdata-variant="error"。
radio.sm.size / lg.sizedata-size="sm" / "lg" の専用サイズ。
radio.error-borderaria-invalid="true" 時の枠線。
radio.disabled-bg無効時の背景。
radio.label-gapinput とテキストの間のギャップ。

CSS 変数

Section titled “CSS 変数”
生成される CSS 変数を表示
--hc-radio-size
--hc-radio-border-width | -border
--hc-radio-bg
--hc-radio-checked-bg | -checked-border
--hc-radio-success-checked-bg | -success-checked-border
--hc-radio-warning-checked-bg | -warning-checked-border
--hc-radio-error-checked-bg | -error-checked-border
--hc-radio-sm-size | -lg-size
--hc-radio-error-border
--hc-radio-disabled-bg
--hc-radio-label-gap
--hc-color-focus-ring
--hc-color-error

関連

Section titled “関連”