CheCheckbox

CheCheckbox は、複数の選択肢から任意の項目を選択するためのチェックボックスコンポーネントです。@base-ui/react の Checkbox を利用しています。

variant="box" でカード枠付きスタイル、CheCheckboxGroup でグループ化が可能です。

NoBox（デフォルト）

ラベル付きチェックボックス。サイズは m（デフォルト）と s の 2 種類です。

プレビュー

使用例

import { CheCheckbox } from "@sen-corporation/cheese-base";

<CheCheckbox label="利用規約に同意する" />

<CheCheckbox label="小さいサイズ" size="s" />

<CheCheckbox label="エラー" error />

<CheCheckbox label="無効" disabled />

Box

variant="box" でカード枠付きスタイルになります。チェックボックスのサイズは "s" に固定され、size の指定は無視されます。

長文テキスト（LongBox）は labelMaxLines で省略行数を指定できます。

プレビュー

使用例

import { CheCheckbox, CheCheckboxGroup } from "@sen-corporation/cheese-base";

<CheCheckbox label="ラベル" variant="box" />;

<div className="overflow-x-auto pb-2">
  <CheCheckboxGroup
    direction="horizontal"
    className="w-max flex-nowrap [&>label]:w-[640px]"
  >
    <CheCheckbox label="短いラベル" value="0" name="opt" variant="box" />
    <CheCheckbox
      label="ダミーテキストは、デザインの作成時に使用される仮の文章です。"
      value="1"
      name="opt"
      variant="box"
      labelMaxLines={3}
    />
  </CheCheckboxGroup>
</div>;

Group

CheCheckboxGroup は CheCheckbox をグループ化するレイアウトラッパーです。children に CheCheckbox を並べて使います。direction で縦横のレイアウトを切り替えます。横並び時の各アイテムの最大幅は itemMaxWidth で指定でき、デフォルトは 640px です。

プレビュー

使用例

import { CheCheckbox, CheCheckboxGroup } from "@sen-corporation/cheese-base";

<CheCheckboxGroup>
  <CheCheckbox label="オプション 1" value="1" name="option" />
  <CheCheckbox label="オプション 2" value="2" name="option" />
</CheCheckboxGroup>

<CheCheckboxGroup direction="horizontal">
  <CheCheckbox label="A" value="a" name="h" variant="box" />
  <CheCheckbox label="B" value="b" name="h" variant="box" error />
</CheCheckboxGroup>

Props

CheCheckbox

CheCheckboxGroup

Controlled（インタラクティブデモ）

checked と onCheckedChange を使った制御コンポーネントパターンのデモです。

import { useState } from "react";
import { CheCheckbox } from "@sen-corporation/cheese-base";

const Example = () => {
  const [checked, setChecked] = useState(false);

  return (
    <CheCheckbox
      label="利用規約に同意する"
      checked={checked}
      onCheckedChange={setChecked}
    />
  );
};