import { Playground, Props } from "@slytrunk/docs";
import { useState } from "react";
import { Text } from "../Text";
import Checkbox from "./Checkbox";

# Checkbox

Base component for a checkbox.

<Props of={Checkbox} />

## Basic usage

<Playground>
  {() => {
    const [checked, setChecked] = useState(false);
    return <Checkbox onChange={(value) => setChecked(value)} value={checked} />;
  }}
</Playground>

### Checked color

<Playground>
  {() => {
    const [checked, setChecked] = useState(false);
    return (
      <Checkbox
        checkedColor="orange"
        onChange={(value) => setChecked(value)}
        value={checked}
      />
    );
  }}
</Playground>

### With a label

<Playground>
  {() => {
    const [checked, setChecked] = useState(false);
    return (
      <Checkbox onChange={(value) => setChecked(value)} value={checked}>
        <Text>I agree to the terms</Text>
      </Checkbox>
    );
  }}
</Playground>