import { CodeBlock, ConfigBlock } from "@src/helpers/DocBlocks";
import Toggle from "./Toggle";

# Toggle

> A clickable UI element with active and hover states. Indicates to the user that it's clickable.

<CodeBlock title="Themed">
  {(value, onChange) => <Toggle value={value} onChange={onChange} themed />}
</CodeBlock>

<CodeBlock>
  <Toggle />
</CodeBlock>

## Configuration

<ConfigBlock of={Toggle} />

## Examples

<CodeBlock title="Type: Primary False">
  <Toggle value={false} />
</CodeBlock>

<CodeBlock title="Type: Themed Toggle with label">
  {(value, onChange) => (
    <Toggle value={value} onChange={onChange} themed label="Toggle" />
  )}
</CodeBlock>

<CodeBlock title="Type: Primary False with label">
  <Toggle label="Label" value={false} />
</CodeBlock>

<CodeBlock title="Type: Primary with className and prefixClassName">
  <Toggle className={"toggle"} prefixClassName={"retoggle"} value={false} />
</CodeBlock>

<CodeBlock title="Type: Primary True">
  <Toggle value={true} />
</CodeBlock>

<CodeBlock title="Type: RedGreen False">
  <Toggle redGreen={true} value={false} />
</CodeBlock>

<CodeBlock title="Type: RedGreen True">
  <Toggle redGreen={true} value={true} />
</CodeBlock>

<CodeBlock title="Type: Error">
  <Toggle label="Label" error={true} value={false} />
</CodeBlock>

<CodeBlock title="Type: Disabled">
  <Toggle disabled={true} value={false} />
</CodeBlock>

<CodeBlock title="Type: Themed Toggle with Disabled state">
  <Toggle value={false} themed disabled />
</CodeBlock>

<CodeBlock title="Type: Themed Disabled Toggle with label">
  {(value, onChange) => (
    <Toggle value={value} onChange={onChange} themed label="Toggle" disabled />
  )}
</CodeBlock>