コンテンツにスキップ

ui:fieldSet

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

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>

checkboxradio などに利用します。

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>

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

属性要素効果
forlabel.ui:fieldSet__labelid識別子説明要素とフィールドを紐づけます
idfieldid識別子フィールドに識別子を付与します

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

属性要素効果
rolerootgroup
aria-labelledbyrootid識別子説明要素を識別子で紐づけます
id.ui:fieldSet__labelid識別子説明要素に識別子を付与します
<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>