Checkbox Card
fandhe-frontend-pre-styled-ui の checkbox_card mod が提供するスタイル済み Checkbox Card 部品です。
Demo
chakra-ui checkbox-card 相当のカード型選択 UI。状態機械は Checkbox（headless）をそのまま再利用し、data-scope="checkbox-card" の新規 anatomy でカード外観を重ねます。
Features
- `checkbox::CheckboxProps` を共有し、カード形状のコンテナ（`control`/`content`/`label`/`description`/`addon`/`indicator` の各パーツ）へ配置する複合部品。
- `size`/`colorPalette` variant クラスを `root` へ付与する。
- `indicator_check` パーツでチェック済み時のみ描画されるチェックマークを提供する。
Anatomy
root
hidden-input
control
indicator
indicator-check
content
label
descriptionAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| size | Size | Size::Md | サイズ variant。 |
| palette | ColorPalette | ColorPalette::Accent | colorPalette 軸。 |
| props | &CheckboxProps | `checkbox` モジュールと共有の状態構造体。 | |
| attrs | Vec<(&str, &str)> | root（`<label>`）パーツへ合成する追加属性。 | |
| children | Vec<Node> | root 配下の子ノード（通常 control/content を含む）。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
| content | data-disabled | |
| content | data-state | checked, unchecked |
| control | data-disabled | |
| control | data-state | checked, unchecked |
| description | data-disabled | |
| description | data-state | checked, unchecked |
| hidden-input | data-disabled | |
| hidden-input | data-state | checked, unchecked |
| indicator | data-disabled | |
| indicator | data-state | checked, unchecked |
| indicator-check | data-disabled | |
| indicator-check | data-state | checked, unchecked |
| label | data-disabled | |
| label | data-state | checked, unchecked |
| root | data-disabled | |
| root | data-state | checked, unchecked |
CSS Variables
| Variable | Default |
|---|---|
| --fandhe-checkbox-card-check-height | 0.5rem |
| --fandhe-checkbox-card-check-width | 0.25rem |
| --fandhe-checkbox-card-control-size | 1rem |
| --fandhe-checkbox-card-dash-width | 0.5rem |
| --fandhe-checkbox-card-label-font-size | var(--fandhe-font-font-size-sm) |
| --fandhe-checkbox-card-padding | 0.75rem |