import { CodeBlock, ConfigBlock } from "@src/helpers/DocBlocks";
import Checkbox from "./Checkbox";
import { InlineCode } from "@src/Theme/components";

# Themed Checkbox

> An input element that helps gather multiple options (The user can usually select more than one option at a time.)

## Checkbox Stacked

<CodeBlock defaultValue={[{ title: "Good Node" }]}>
  {(value, onChange) => (
    <Checkbox
      value={value}
      onChange={onChange}
      themed
      mode="stacked"
      options={[{ title: "Good Node" }, { title: "Bad Node" }]}
    />
  )}
</CodeBlock>

## Checkbox Inline

<CodeBlock defaultValue={[{ title: "Good Node" }]}>
  {(value, onChange) => (
    <Checkbox
      value={value}
      onChange={onChange}
      themed
      mode="inline"
      options={[{ title: "Good Node" }, { title: "Bad Node" }]}
    />
  )}
</CodeBlock>

## Examples

<CodeBlock title="Multiple Options" defaultValue={[{ title: "Good Node" }]}>
  {(value, onChange) => (
    <Checkbox
      value={value}
      onChange={onChange}
      themed
      options={[
        { title: "React" },
        { title: "Angular" },
        { title: "Vue" },
        { title: "Svelte" },
      ]}
    />
  )}
</CodeBlock>

<CodeBlock title="OnChange Callback" defaultValue={[{ title: "React" }]}>
  {value => (
    <Checkbox
      value={value}
      onChange={result => {
        alert(JSON.stringify(result));
        onChange(result);
      }}
      themed
      options={[
        { title: "React" },
        { title: "Angular" },
        { title: "Vue" },
        { title: "Svelte" },
      ]}
    />
  )}
</CodeBlock>

<CodeBlock title="Disabled" defaultValue={[{ title: "F&B" }]}>
  {(value, onChange) => (
    <Checkbox
      value={value}
      onChange={onChange}
      disabled
      themed
      options={[{ title: "Tech" }, { title: "F&B" }, { title: "Finance" }]}
    />
  )}
</CodeBlock>

<CodeBlock title="With Label - Stacked" defaultValue={[{ title: "Good Node" }]}>
  {(value, onChange) => (
    <Checkbox
      value={value}
      onChange={onChange}
      label="Select relevant options"
      themed
      options={[
        { title: "React" },
        { title: "Angular" },
        { title: "Vue" },
        { title: "Svelte" },
      ]}
    />
  )}
</CodeBlock>

<CodeBlock title="With Label - Inline" defaultValue={[{ title: "Good Node" }]}>
  {(value, onChange) => (
    <Checkbox
      value={value}
      onChange={onChange}
      mode="inline"
      label="Select relevant options"
      themed
      options={[
        { title: "React" },
        { title: "Angular" },
        { title: "Vue" },
        { title: "Svelte" },
      ]}
    />
  )}
</CodeBlock>

> Since Checkbox uses <InlineCode>Box</InlineCode> as a wrapper, it can inherit all its styling props as well

<CodeBlock title="With Box's Props" defaultValue={[{ title: "Good Node" }]}>
  {(value, onChange) => (
    <Checkbox
      value={value}
      onChange={onChange}
      mode="inline"
      label="Select relevant options"
      themed
      padding="md"
      borderWidth="xs"
      borderStyle="dashed"
      borderColor="grey.dark"
      options={[
        { title: "React" },
        { title: "Angular" },
        { title: "Vue" },
        { title: "Svelte" },
      ]}
    />
  )}
</CodeBlock>