Checkbox

選択状態を表すチェックボックス。単一チェックボックスとチェックボックスグループに対応。

インストール

import { Checkbox } from "@ginga-ui/core";

基本的な使い方

単一のチェックボックスの使用例です。

export function BasicExample() {
  return <Checkbox label="利用規約に同意する" />;
}

選択済み

初期状態で選択されているチェックボックスです。

export function SelectedExample() {
  return <Checkbox label="デフォルトで選択" selected />;
}

無効化

無効化されたチェックボックスの例です。

export function DisabledExample() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
      <Checkbox label="無効化されたチェックボックス" disabled />
      <Checkbox label="無効化かつ選択済み" disabled selected />
    </div>
  );
}

チェックボックスグループ

複数のチェックボックスをグループ化した例です。

export function CheckboxGroupExample() {
  return (
    <CheckboxGroup>
      <Checkbox value="option1" label="オプション 1" />
      <Checkbox value="option2" label="オプション 2" />
      <Checkbox value="option3" label="オプション 3" />
    </CheckboxGroup>
  );
}