> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stac.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# CheckBox

> Documentation for CheckBox

export const PLAYGROUND_BASE_URL = "https://playground.stac.dev/";

export const checkBoxPreviewJson = {
  "type": "checkBox",
  "id": "checkbox_1",
  "value": true,
  "tristate": false,
  "mouseCursor": "click",
  "activeColor": "#FF0000",
  "fillColor": {
    "type": "materialColor",
    "color": "#00FF00"
  },
  "checkColor": "#0000FF",
  "focusColor": "#FFFF00",
  "hoverColor": "#FF00FF",
  "splashRadius": 20,
  "materialTapTargetSize": "padded",
  "autofocus": true,
  "isError": false
};
export const checkBoxPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The Stac CheckBox allows you to build a Flutter CheckBox widget using JSON.
To know more about the CheckBox widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Checkbox-class.html).

## Properties

| Property              | Type                        | Description                                                                                        |
| --------------------- | --------------------------- | -------------------------------------------------------------------------------------------------- |
| id                    | `String`                    | The identifier for the checkbox.                                                                   |
| value                 | `bool`                      | The current value of the checkbox.                                                                 |
| tristate              | `bool`                      | Whether this checkbox is in a tristate mode. Defaults to `false`.                                  |
| onChanged             | `StacAction`                | The callback that is called when the value changes.                                                |
| mouseCursor           | `StacMouseCursor`           | The cursor for a mouse pointer when it enters or is hovering over the checkbox.                    |
| activeColor           | `StacColor`                 | The color to use when this checkbox is checked.                                                    |
| fillColor             | `StacMaterialColor`         | The color to use for the fill of the checkbox.                                                     |
| checkColor            | `StacColor`                 | The color to use for the check icon.                                                               |
| focusColor            | `StacColor`                 | The color to use for the checkbox's focus color.                                                   |
| hoverColor            | `StacColor`                 | The color to use for the checkbox's hover color.                                                   |
| overlayColor          | `StacMaterialColor`         | The color to use for the checkbox's overlay color.                                                 |
| splashRadius          | `double`                    | The splash radius of the checkbox's tap target.                                                    |
| materialTapTargetSize | `StacMaterialTapTargetSize` | Configures the minimum size of the tap target.                                                     |
| autofocus             | `bool`                      | Whether this checkbox should focus itself if nothing else is already focused. Defaults to `false`. |
| isError               | `bool`                      | Whether this checkbox is in an error state. Defaults to `false`.                                   |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacCheckBox(
      id: 'checkbox_1',
      value: true,
      tristate: false,
      mouseCursor: StacMouseCursor.click,
      activeColor: StacColors.red,
      fillColor: StacMaterialColor(color: StacColors.green),
      checkColor: StacColors.blue,
      focusColor: StacColors.yellow,
      hoverColor: StacColors.pink,
      splashRadius: 20.0,
      materialTapTargetSize: StacMaterialTapTargetSize.padded,
      autofocus: true,
      isError: false,
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "checkBox",
      "id": "checkbox_1",
      "value": true,
      "tristate": false,
      "mouseCursor": "click",
      "activeColor": "#FF0000",
      "fillColor": {
        "type": "materialColor",
        "color": "#00FF00"
      },
      "checkColor": "#0000FF",
      "focusColor": "#FFFF00",
      "hoverColor": "#FF00FF",
      "splashRadius": 20,
      "materialTapTargetSize": "padded",
      "autofocus": true,
      "isError": false
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={checkBoxPreviewSrc}
        title="Stac Playground"
        className="w-full rounded-xl border-0"
        style={{ height: "640px" }}
        loading="lazy"
        onLoad={(event) => {
      const iframe = event.currentTarget;
      const targetOrigin = PLAYGROUND_BASE_URL;
      const message = {
        type: "stac-preview-json",
        payload: checkBoxPreviewJson
      };

      let attempts = 0;
      const maxAttempts = 12;
      const interval = setInterval(() => {
        iframe.contentWindow?.postMessage(message, targetOrigin);
        attempts += 1;

        if (attempts >= maxAttempts) {
          clearInterval(interval);
        }
      }, 250);
    }}
      />
    </Frame>
  </Tab>
</Tabs>