ui:fieldSet

フィールド項目を構成するfieldSetコンポーネントです。

Exampes

Single Field

Source Code

<div class="ui:fieldSet">
  <div class="ui:fieldSet__header">
    <label class="ui:fieldSet__label" for="email">メールアドレス</label>
    <div class="ui:badge" data-color="red">必須</div>
  </div>
  <div class="ui:fieldSet__body">
    <div class="ui:textField">
      <input
        type="email"
        id="email"
        name="email"
        placeholder="noreply@example.com"
        aria-describedby="email-error"
        aria-invalid="true" />
    </div>
  </div>
  <div class="ui:fieldSet__footer">
    <div class="ui:errorMessage" id="email-error">正しいメールアドレス形式で入力して下さい。</div>
    <ol class="ui:footnotes">
      <li>注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト</li>
    </ol>
  </div>
</div>

Group Field

checkbox や radio などに利用します。

Source Code

<div class="ui:fieldSet" role="group" aria-labelledby="plan-label">
  <div class="ui:fieldSet__header">
    <div class="ui:fieldSet__label" id="plan-label">Select Plan</div>
    <div class="ui:badge" data-color="red">必須</div>
  </div>
  <div class="ui:fieldSet__body">
    <div class="flex gap-2">
      <label class="ui:radio">
        <input type="radio" name="plan" checked />Basic
      </label>
      <label class="ui:radio">
        <input type="radio" name="plan" />Pro
      </label>
      <label class="ui:radio">
        <input type="radio" name="plan" disabled />Enterprise (準備中)
      </label>
    </div>
  </div>
</div>

Accessibility

Single Field

通常の label 利用時と同等の内容です。

属性	要素	値	効果
for	label.ui:fieldSet__label	id識別子	説明要素とフィールドを紐づけます
id	field	id識別子	フィールドに識別子を付与します

Group Field

fieldset + legend タグを利用しないため、同等のA11y機能を aria 属性等で補完します。

属性	要素	値	効果
role	root	group
aria-labelledby	root	id識別子	説明要素を識別子で紐づけます
id	.ui:fieldSet__label	id識別子	説明要素に識別子を付与します

HTML Structure

<div class="ui:fieldSet">
  <div class="ui:fieldSet__header">
    <label|div class="ui:fieldSet__label">説明テキスト</label|div>
    ...
  </div>
  <div class="ui:fieldSet__body">...</div>
  <div class="ui:fieldSet__footer">...</div>
</div>