Native Select

fandhe-frontend-pre-styled-ui の native_select mod が提供するスタイル済み Native Select 部品です。

Note

Anatomy は共有スコープ field のパーツ構成として導出されます。ラベル・補助テキスト・エラーテキスト・必須マークの型階層は Field が提供します。複数のフィールドをまとめるグループ化は Fieldset が提供します。

Demo

素の select/option 要素をそのまま styled 化した選択部品。invalid/disabled 状態は headless field:: へ委譲した data-* 属性・aria-invalid で表現し、optgroup による選択肢グループ化にも対応します。

Please select a country.

Features

variant/size の 2 軸を持ち、headless-ui の field::select（data-scope="field"）へ委譲する。ネイティブ <select> を組み立てるため、キーボード操作はブラウザ標準に委ねる。

Anatomy

select
error-text

API Reference

Arguments

Name	Type	Default	Description
`props`	`&NativeSelectProps`	—	`variant`・`size` を束ねる構造体。
`field`	`&FieldProps<'_>`	—	headless-ui `field` スコープ共通の状態。
`extra_attrs`	`Vec<(&str, &str)>`	—	`<select>` へ合成する追加属性。
`children`	`Vec<Node>`	—	`<option>` 等の子ノード。

Data Attributes

Part	Attribute	Observed Values
`error-text`	`data-invalid`	（値なし）
`select`	`data-disabled`	（値なし）
`select`	`data-invalid`	（値なし）

CSS Variables

Variable	Default
`--fandhe-field-label-bg`	`var(--fandhe-color-bg)`

Examples

ラベル・補助テキストとの組み合わせ

native_select はラベル・補助テキストの型階層を持たず、field（/themes/field/）が担う（モジュール rustdoc「field scope を共有する理由」参照）。field::label/field::helper_text/field::root と組み合わせるだけの合成例です（イシュー #2017、shadcn/ui の label + native select + description パターンと同型の構成を本リポジトリの既存 API で再現）。

CountryWe use this to localize prices and shipping.

Accessibility

Keyboard Interactions

Key	Description
ArrowUp / ArrowDown	ネイティブ `<select>` の標準挙動として選択肢を移動する（ブラウザ実装依存、本フレームワークの JS 出力によらない）。