{
  "name": "Checkbox",
  "category": "controls",
  "description": "Checkbox component for toggling boolean value related to some context",
  "extends": [
    "basic/TouchableOpacity"
  ],
  "modifiers": [
    "margin",
    "background"
  ],
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CheckboxScreen.tsx",
  "images": [
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Checkbox/Checkbox.gif?raw=true"
  ],
  "props": [
    {
      "name": "value",
      "type": "boolean",
      "description": "The Checkbox value. If true the switch will be turned on. Default value is false"
    },
    {
      "name": "onValueChange",
      "type": "(value) => void",
      "description": "Callback function for value change event"
    },
    {
      "name": "onChangeValidity",
      "type": "(isValid: boolean) => void",
      "description": "Callback for when field validity has changed"
    },
    {
      "name": "required",
      "type": "boolean",
      "description": "Whether the checkbox is required"
    },
    {
      "name": "disabled",
      "type": "boolean",
      "description": "Whether the checkbox should be disabled"
    },
    {
      "name": "color",
      "type": "string",
      "description": "The Checkbox color"
    },
    {
      "name": "outline",
      "type": "boolean",
      "description": "Alternative Checkbox outline style"
    },
    {
      "name": "size",
      "type": "number",
      "description": "The Checkbox size, affect both width and height"
    },
    {
      "name": "borderRadius",
      "type": "number",
      "description": "The Checkbox border radius"
    },
    {
      "name": "selectedIcon",
      "type": "ImageRequireSource",
      "description": "The icon asset to use for the selected indication"
    },
    {
      "name": "iconColor",
      "type": "string",
      "description": "The selected icon color"
    },
    {
      "name": "label",
      "type": "string",
      "description": "Add a label to the Checkbox"
    },
    {
      "name": "labelStyle",
      "type": "TextStyle",
      "description": "Pass to style the label"
    },
    {
      "name": "labelProps",
      "type": "TextProps",
      "description": "Props to pass on to the label component"
    },
    {
      "name": "style",
      "type": "ViewStyle",
      "description": "Custom styling for the Checkbox"
    },
    {
      "name": "containerStyle",
      "type": "ViewStyle",
      "description": "Custom styling for the checkbox and label container"
    }
  ],
  "snippet": [
    "function Example(props) {",
    "  const [value, setValue] = useState(false$1);",
    "  return (",
    "    <div>",
    "      <Checkbox value={value$2} onValueChange={setValue$3}/>",
    "    </div>",
    "  );",
    "}"
  ],
  "docs": {
    "hero": {
      "title": "Checkbox",
      "description": "Checkboxes allow the user to select one or more items from a set.
They can be used to turn an option on or off, or to indicate approval or verification.",
      "type": "hero",
      "layout": "horizontal",
      "content": [
        {
          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_overview_preview.png"
        }
      ]
    },
    "tabs": [
      {
        "title": "Overview",
        "sections": [
          {
            "type": "section",
            "title": "Usage Examples",
            "description": "",
            "content": [
              {
                "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Docs-Assets?node-id=26-3181&embed-host=share"
              }
            ]
          },
          {
            "type": "table",
            "columns": [
              "Property",
              "Component"
            ],
            "items": [
              {
                "title": "Default",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_overview_style_default.png"
                  }
                ]
              },
              {
                "title": "Light",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_overview_style_light.png"
                  }
                ]
              }
            ],
            "title": "Styles",
            "description": ""
          },
          {
            "type": "table",
            "columns": [
              "Property",
              "Component"
            ],
            "items": [
              {
                "title": "Un-Checked",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_overview_states_unchecked.png"
                  }
                ]
              },
              {
                "title": "Checked",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_overview_states_checked.png"
                  }
                ]
              },
              {
                "title": "Indeterminate",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_overview_states_indeterminate.png"
                  }
                ]
              },
              {
                "title": "Validation Error",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_overview_states_validation_error.png"
                  }
                ]
              },
              {
                "title": "Disabled",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_overview_states_disabled.png"
                  }
                ]
              }
            ],
            "title": "States",
            "description": ""
          },
          {
            "type": "table",
            "columns": [
              "Property",
              "Component"
            ],
            "items": [
              {
                "title": "Label",
                "description": "A label can be displayed next to the Checkbox.",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_overview_props_label.png"
                  }
                ]
              }
            ],
            "title": "Accessories",
            "description": ""
          },
          {
            "type": "list",
            "items": [
              {
                "title": "Size",
                "description": "The checkbox comes only in one size, and cannot be resized.\nSize: 24x24",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_overview_spec.png"
                  }
                ]
              }
            ],
            "layout": "horizontal",
            "title": "Spec",
            "description": ""
          }
        ]
      },
      {
        "title": "UX Guidelines",
        "sections": [
          {
            "type": "section",
            "content": [
              {
                "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Docs-Assets?node-id=61-6739&embed-host=share"
              }
            ],
            "title": "Position",
            "description": "For screens requiring multiple selections, use the Multi-Select List.
If a Checkbox is used to indicate approval or verification, place it with a label to its right."
          },
          {
            "type": "section",
            "title": "Checkbox Group",
            "description": "Use ListItem component to group multiple options for the user to choose from.",
            "content": [
              {
                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_ux_checkbox_group.png"
              }
            ]
          }
        ]
      }
    ]
  }
}