import Example from "../../components/example";
import Layout from "../../components/layout";
import Exports from "../../components/exports";

import Basic from "examples/checkbox/basic-controlled.tsx";
import Uncontrolled from "examples/checkbox/basic-uncontrolled";
import Multiline from "examples/checkbox/multiline.tsx";
import Error from "examples/checkbox/error.tsx";
import Indeterminate from "examples/checkbox/indeterminate.tsx";
import Disabled from "examples/checkbox/disabled.tsx";
import Alignment from "examples/checkbox/alignment.tsx";
import Customization from "examples/checkbox/overrides.tsx";
import ComponentOverrides from "examples/checkbox/component-overrides.tsx";
import Focus from "examples/checkbox/focus.tsx";
import Toggle from "examples/checkbox/toggle.tsx";

import { Block } from "baseui/block";
import { StatefulCheckbox, STYLE_TYPE } from "baseui/checkbox";
import * as CheckboxExports from "baseui/checkbox";

import Yard from "../../components/yard/index";
import checkboxYardConfig from "../../components/yard/config/checkbox";

export default Layout;

# Checkbox

<Yard placeholderHeight={48} {...checkboxYardConfig} />

Checkboxes are used to provide users with multiple options for selection in a series of options.

When used as a toggle they allow the user to make a binary choice usually (but not limited) in
the form of a yes/no or on/off suggestion. Toggles are often used in product settings or as filter
options. When engaged (on), Base Web toggles are colored and when disengaged (off) they’re grey.

## When to use

- When a collection of options share context.
- When a user wants to toggle an option on/off.
- When a user wants to select multiple options.

## Examples

<Example title="Basic usage" path="checkbox/basic-controlled.tsx">
  <Basic />
</Example>

<Example title="Multiple lines" path="checkbox/multiline.tsx">
  <Multiline />
</Example>

<Example title="Error state" path="checkbox/error.tsx">
  <Error />
</Example>

<Example title="Indeterminate state" path="checkbox/indeterminate.tsx">
  <Indeterminate />
</Example>

<Example title="Disabled state" path="checkbox/disabled.tsx">
  <Disabled />
</Example>

<Example title="Alignments" path="checkbox/alignment.tsx">
  <Alignment />
</Example>

<Example title="Overriding styles" path="checkbox/overrides.tsx">
  <Customization />
</Example>

<Example
  title="Overriding sub-components"
  path="checkbox/component-overrides.tsx"
>
  <ComponentOverrides />
</Example>

<Example title="Focus and ref" path="checkbox/focus.tsx">
  <Focus />
</Example>

<Example title="As a toggle" path="checkbox/toggle.tsx">
  <Toggle />
</Example>

<Example
  title="Stateful (uncontrolled) usage"
  path="checkbox/basic-uncontrolled.tsx"
>
  <Uncontrolled />
</Example>

As with many of our components, there is also an [uncontrolled](https://reactjs.org/docs/uncontrolled-components.html) version, `StatefulCheckbox`, which manages its own state.

<Exports
  component={CheckboxExports}
  title="Checkbox exports"
  path="baseui/checkbox"
/>