Checkbox

Checkboxコンポーネントは、チェックボックスの入力を行なうためのコンポーネントです。

基本的な使い方

「フォーム#基本的な使い方」にあるように、FormコンポーネントのinitialValues propsを使ってCheckboxの初期値を設定できます。初期値には真偽値か、Checkboxのvalueの配列を指定します。

単一のCheckboxの場合

単一のCheckboxの場合、initialValuesに真偽値を指定します。trueの場合、チェックボックスは選択された状態になり、falseの場合は選択されていない状態になります。 initialValuesを指定しなければfalse扱いになります。

import { Card, Form, Flexbox, Checkbox, Button } from "@basemachina/view";
 
const App = () => {
  return (
    <Card>
      <Form onSubmit={() => {}} initialValues={{ isActive: true }}>
        <Flexbox direction="col">
          <Checkbox name="isActive" label="有効化する" />
          <Button type="submit" title="送信" color="blue" />
        </Flexbox>
      </Form>
    </Card>
  );
};
export default App;

FormのonSubmit propsで受け取れる値も真偽値になります。

複数のCheckboxの場合

また、複数のCheckboxの場合はCheckboxのvalueの配列をinitialValuesに指定します。空配列を指定すると、すべてのCheckboxが選択されていない状態になります。

import { Form, Checkbox, Flexbox, Card, Button } from "@basemachina/view";
 
const App = () => {
  return (
    <Card>
      <Form onSubmit={() => {}} initialValues={{ fruits: ["apple", "orange"] }}>
        <Flexbox direction="col">
          <Flexbox>
            <Checkbox name="fruits" label="りんご" value="apple" />
            <Checkbox name="fruits" label="バナナ" value="banana" />
            <Checkbox name="fruits" label="オレンジ" value="orange" />
          </Flexbox>
          <Button type="submit" title="送信" color="blue" />
        </Flexbox>
      </Form>
    </Card>
  );
};
 
export default App;

この例では、valueとして"apple"と"orange"を持つCheckboxが選択された状態になります。

FormのonSubmit propsで受け取れる値もvalueの配列になります。

詳細なインターフェース

名前	説明	必須・任意	デフォルト値
name	フィールドの名前を指定します。	必須	なし
label	チェックボックスのラベルを指定します。	任意	なし
value	チェックボックスが選択されたときの値を指定します。	任意	なし
disabled	チェックボックスが無効化されているかどうかを指定します。`true`の場合、チェックボックスはクリックできません。	任意	`false`
checked	チェックボックスが選択されているかどうかを指定します。	任意	`false`
onChange	チェックボックスの選択状態が変更されたときに呼び出される関数を指定します。引数としてReactイベントオブジェクト (opens in a new tab)が渡されます。	任意	なし

`value`, `onChange`, `checked` propsの使い方

valueを使う場合は「フォーム#value, onChange propsの使い方」をご覧ください。

また、Checkboxは他の入力コンポーネントにはないchecked propsを持っています。checkedを使う場合は真偽値をuseState等で状態管理してください。

import { useState } from "react";
import { Checkbox, Form } from "@basemachina/view";
 
const App = () => {
  const [checked, setChecked] = useState(false);
  return (
    <Form>
      <Checkbox
        name="isActive"
        label="有効化する"
        checked={checked}
        onChange={(e) => setChecked(e.target.checked)}
      />
    </Form>
  );
};
export default App;

DateTimePicker FileInput