Fieldset

fandhe-frontend-pre-styled-ui の fieldset mod が提供するスタイル済み Fieldset 部品です。Root / Legend / HelperText / ErrorText の 4 パーツ構成で、複数の Field をネイティブ <fieldset> / <legend> でグループ化します。UA 既定の <fieldset> / <legend> 枠線・padding をリセットしたうえで、size（sm / md / lg、既定 md）軸のみによる余白・文字サイズの段階化を提供します（orientation / colorPalette 軸は持ちません）。

内側の各 Field（ラベル・入力欄・補助テキスト等）は本部品が所有せず、Field / Input 等の各部品がそのまま担います。data-disabled / data-invalid はいずれも headless 層が出力する状態を CSS セレクタとして参照して見た目を切り替えるだけで、値の妥当性判定・送信処理といったバリデーション自体はこの部品では実装しません。

Legend は legend_with_variant で legend（既定・大見出し）/ label（size 軸の 1 段下、小見出し）の 2 段見出しサイズを選べます（shadcn/ui FieldLegend の variant prop と突合、イシュー #2214）。既存の legend は data-variant を出力しない契約のまま不変です。

Demo

複数の Field をネイティブ <fieldset>/<legend> でグループ化する静的コンテナ部品。size 軸のみを持ち、data-disabled/data-invalid を CSS セレクタとして参照して見た目を切り替えるだけでバリデーション自体は実装しません。

Contact details

Name

We use this to confirm your order.

Contact details

Name

We use this to confirm your order.

Please complete every field in this group.

Contact details

Name

Contact details

Name

Contact details

Name

Contact details

Name

Contact details

Name

Features

root/legend/helper-text/error-text の 4 slot に UA 既定の <fieldset>/<legend> 枠線・padding のリセットと size 軸（sm/md/lg、既定 md）の余白・文字サイズ段階化を提供する。内側の各コントロール・型階層は [Field](../field/) / [Input](../input/) 等が担うため、本モジュールは input/textarea/select/label/required-indicator の各 slot を宣言しない。
size のみを持つ variant 軸（orientation/colorPalette は非提供。Fieldset は常に縦積みのグループコンテナであり、フォーム系のカラーパレット軸も非提供）。
data-disabled/data-invalid はいずれも headless-ui fieldset::root が出力する状態を CSS セレクタとして参照するだけで、値の妥当性判定・送信処理といったバリデーション自体は実装しない（docs/policy/intentional-non-adoption.md §3.25 規則 1）。
error-text は非該当状態で hidden 存在属性を付与する headless 側の fail-closed 描画に従い、[hidden] { display: none; } のみを重ねる（独自の表示切替ロジックは持たない）。
root へは disabled_declarations() を付与しない（ネイティブ <fieldset disabled> が子コントロールを HTML 仕様で無効化し、内側の styled コントロールが自前で減光するため、二重に薄くなることを避ける設計判断）。
hover / focus ring / transition はいずれも意図的に非採用（実フォーカスは内側のコントロール側にあり、状態遷移に伴う視覚変化がないため）。
legend_with_variant + LegendVariant（legend/label）で shadcn/ui FieldLegend の 2 段見出しサイズを突合する（イシュー #2214）。data-variant は headless fieldset::legend_with_variant が出力する語彙であり、本モジュールは [data-variant="label"] を CSS セレクタとして参照して size 軸の 1 段下（sm→xs/md→sm/lg→md）のフォントサイズへ切り替えるのみ。既存 legend（data-variant を出力しない）はバイト単位で不変。

Anatomy

root
  legend
  helper-text
  error-text

API Reference

Arguments

Name	Type	Default	Description
`props`	`&FieldsetRootProps`	—	`size`（既定 `Md`）を束ねる構造体。
`fieldset`	`&FieldsetProps<'_>`	—	`id`・`disabled`・`invalid`・`has_helper_text` 等、headless-ui `fieldset` スコープ共通の状態。
`attrs`	`Vec<(&str, &str)>`	—	`root` へ合成する追加属性（`class` は recipe クラスへ置き換えられ除去される）。
`children`	`Vec<Node>`	—	`root` 配下の子ノード（`legend`/内側 Field 群/`helper_text`/`error_text` 等）。
`legend_with_variant(variant, ...)`	`LegendVariant`	`Legend`	`legend` の代わりに使う。`data-variant`（`legend`/`label`）を headless 層が出力し、`label` は `size` 軸の 1 段下のフォントサイズに切り替わる（イシュー #2214）。

Data Attributes

Part	Attribute	Observed Values
`error-text`	`data-disabled`	（値なし）
`error-text`	`data-invalid`	（値なし）
`helper-text`	`data-invalid`	（値なし）
`legend`	`data-disabled`	（値なし）
`legend`	`data-invalid`	（値なし）
`legend`	`data-variant`	`label`, `legend`
`root`	`data-disabled`	（値なし）
`root`	`data-invalid`	（値なし）

CSS Variables

Variable	Default
`--fandhe-fieldset-legend-font-size`	`var(--fandhe-font-font-size-md)`
`--fandhe-fieldset-legend-gap`	`var(--fandhe-space-4)`
`--fandhe-fieldset-legend-label-font-size`	`var(--fandhe-font-font-size-sm)`

Examples

Label-sized legend

shadcn/ui FieldLegend の variant="label" 相当。legend_with_variant(LegendVariant::Label, ...) を使うと、既定の大見出し（Legend）より 1 段小さいフォントサイズで legend を描画できます。

Shipping address

Name

Accessibility

WAI-ARIA

Attribute	Description
aria-describedby	`invalid` のとき error id、`has_helper_text` のとき helper id を空白区切りで合成し `root` へ付与する（headless `fieldset::root` の描画則）。
role="alert" / aria-live="polite"	`error_text` パーツへ固定付与する。`role="alert"` の暗黙 `aria-live="assertive"` は明示 `polite` で上書きされ、shadcn/ui `FieldError` とのロール語彙パリティを純追加する（イシュー #2184）。
disabled	`disabled` が `true` のとき `root`（`<fieldset>`）へ存在属性として付与し、HTML 標準の仕様により内側の全コントロールへ伝播する。
<legend> 関連付け	`<fieldset>` 内の先頭に置かれた `<legend>` がネイティブにグループのアクセシブルネームを構成するため、`aria-labelledby` は不要。
hidden	`error_text` が非 `invalid` のとき存在属性として付与する fail-closed 描画。