# Checkbox

A customizable checkbox input for selecting options with various states and styling.

### **Import**
```tsx
import { Checkbox } from '@app-studio/web';
```

### **Default**
```tsx
import React from 'react';

import { Checkbox } from '../Checkbox';

export const DefaultCheckbox = () => <Checkbox label="option" />;
```

### **shadow**
Shadow or elevation styling for the checkbox.

- **Type:** `Shadow | Elevation | ViewProps`
- **Default:** `[object Object]`
- **Possible Values:** ``

```tsx
import React from 'react';
import { Checkbox } from '../../../Form/Checkbox/Checkbox';

export const ShadowCheckbox = () => (
  <Checkbox
    id="shadowCheckbox"
    shadow={{ boxShadow: 'rgb(249, 115, 22) 0px 4px 14px 0px' }}
    defaultIsSelected
  />
);
```

### **infoText**
Supplementary text displayed below the label.

- **Type:** `string`
- **Possible Values:** ``

```tsx
import React from 'react';

import { Checkbox } from '../Checkbox';

export const InfoTextDemo = () => (
  <Checkbox
    label=" Accept terms and conditions"
    infoText="You agree to our Terms of Service and Privacy Policy."
  />
);
```

### **ColorScheme**

```tsx
import React from 'react';
import { Vertical } from 'app-studio';

import { Checkbox } from '../Checkbox';

export const ColorCheckbox = () => (
  <Vertical gap={15}>
    {[
      'theme-primary',
      'theme-secondary',
      'theme-error',
      'theme-success',
      'theme-warning',
    ].map((color) => (
      <Checkbox
        key={color}
        label={color}
        defaultIsSelected
        views={{
          checkbox: {
            backgroundColor: color,
            borderColor: color,
          },
        }}
      />
    ))}
  </Vertical>
);
```

### **Default**

```tsx
import React from 'react';

import { Checkbox } from '../Checkbox';

export const DefaultCheckbox = () => <Checkbox label="option" />;
```

### **DisabledInput**

```tsx
import React from 'react';

import { Checkbox } from '../Checkbox';

export const DisabledCheckbox = () => <Checkbox label="disabled" isDisabled />;
```

### **ErrorCheckbox**

```tsx
import React from 'react';

import { Checkbox } from '../Checkbox';

export const ErrorCheckbox = () => (
  <Checkbox id="error" label="Option" error="Must be checked" />
);
```

### **FormCheckout**

```tsx
import React from 'react';
import { Button } from '../../../Button/Button';
import { FormikForm } from '../../../Formik/Formik.Form';

import { Vertical } from 'app-studio';
import { View } from 'app-studio';
import { FormikCheckbox } from '../../../Formik/Formik.Checkbox';
import { Formik } from 'formik';

export const FormCheckbox = () => {
  // const handleSubmit = (event: any) => {
  //   event.preventDefault();

  //   const selectedVegetables: Array<string> = [];
  //   if (isOnionChecked) selectedVegetables.push('onion');
  //   if (isCarrotChecked) selectedVegetables.push('carrot');
  //   alert(`You selected: ${selectedVegetables.join(', ')}`);
  // };
  return (
    <Formik
      initialValues={{}}
      onSubmit={console.log}

      // onSubmit={(values, { setSubmitting }) => {
      //   setTimeout(() => {
      //     alert(JSON.stringify(values, null, 2));
      //     setSubmitting(false);
      //   }, 400);
      //}}
    >
      {(props: any) => (
        <FormikForm margin={10}>
          <Vertical gap={10}>
            <View>Choose your vegetables:</View>
            <FormikCheckbox name="onion" label="onion" />
            <FormikCheckbox name="carrot" label="carrot" />
            <Button type="submit" onClick={props.handleSubmit}>
              Submit
            </Button>
          </Vertical>
        </FormikForm>
      )}
    </Formik>
  );
};
```

### **IconCheckbox**

```tsx
import React from 'react';
import { EditIcon } from '../../../Icon/Icon';

import { Checkbox } from '../Checkbox';

export const IconCheckbox = () => (
  <Checkbox id="child" icon={<EditIcon widthHeight={14} />} label="Label" />
);
```

### **IndeterminateCheckbox**

```tsx
import React from 'react';

import { Checkbox } from '../Checkbox';

export const IndeterminateCheckbox = () => (
  <Checkbox id="check" isIndeterminate label="Select All" />
);
```

### **ReadOnlyInput**

```tsx
import React from 'react';

import { Checkbox } from '../Checkbox';

export const ReadOnlyCheckbox = () => (
  <Checkbox label="Read Only" isReadOnly defaultIsSelected />
);
```

### **Shadow**

```tsx
import React from 'react';
import { Checkbox } from '../../../Form/Checkbox/Checkbox';

export const ShadowCheckbox = () => (
  <Checkbox
    id="shadowCheckbox"
    shadow={{ boxShadow: 'rgb(249, 115, 22) 0px 4px 14px 0px' }}
    defaultIsSelected
  />
);
```

### **SizeInput**

```tsx
import React from 'react';
import { Vertical } from 'app-studio';

import { Checkbox } from '../Checkbox';

export const SizeCheckbox = () => (
  <Vertical gap={10}>
    <Checkbox size="sm" label="sm" defaultIsSelected />
    <Checkbox size="md" label="md" defaultIsSelected />
    <Checkbox size="lg" label="lg" defaultIsSelected />
    <Checkbox size="xl" label="xl" defaultIsSelected />
  </Vertical>
);
```

### **StylesInput**

```tsx
import React from 'react';

import { Checkbox } from '../Checkbox';

export const StyledCheckbox = () => (
  <Checkbox
    label="Active"
    views={{
      checkbox: {
        borderRadius: '50%',
        borderColor: 'theme-primary',
        borderStyle: 'solid',
        borderWidth: 1,
        height: '16px',
        width: '16px',
      },
      label: { color: 'theme-primary' },
    }}
    defaultIsSelected
  />
);
```

### **DesignSystem**

```tsx
/**
 * Checkbox Examples - Design System
 *
 * Showcases the Checkbox component following the design guidelines:
 * - Typography: Inter/Geist font, specific sizes/weights
 * - Spacing: 4px grid system
 * - Colors: Neutral palette with semantic colors
 * - Rounded corners: Consistent border radius
 * - Transitions: Subtle animations
 */

import React from 'react';
import { Checkbox } from '../Checkbox';
import { Vertical } from 'app-studio';
import { Text } from 'app-studio';
import { View } from 'app-studio';

export const DesignSystemCheckboxes = () => (
  <Vertical gap={24}>
    {/* Size Variants */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        Size Variants
      </Text>
      <Vertical gap={16}>
        <Checkbox size="xs" label="Extra Small Checkbox" />

        <Checkbox size="sm" label="Small Checkbox" />

        <Checkbox size="md" label="Medium Checkbox (Default)" />

        <Checkbox size="lg" label="Large Checkbox" />

        <Checkbox size="xl" label="Extra Large Checkbox" />
      </Vertical>
    </View>

    {/* States */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        States
      </Text>
      <Vertical gap={16}>
        <Checkbox label="Unchecked (Default)" />

        <Checkbox label="Checked" defaultIsSelected />

        <Checkbox label="Indeterminate" isIndeterminate />

        <Checkbox label="Disabled Unchecked" isDisabled />

        <Checkbox label="Disabled Checked" isDisabled defaultIsSelected />

        <Checkbox label="Read-only Unchecked" isReadOnly />

        <Checkbox label="Read-only Checked" isReadOnly defaultIsSelected />

        <Checkbox label="Error State" error="This field is required" />
      </Vertical>
    </View>

    {/* Label Positions */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        Label Positions
      </Text>
      <Vertical gap={16}>
        <Checkbox label="Label on the right (Default)" labelPosition="right" />

        <Checkbox label="Label on the left" labelPosition="left" />
      </Vertical>
    </View>

    {/* With Info Text */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        With Info Text
      </Text>
      <Vertical gap={16}>
        <Checkbox
          label="Terms and Conditions"
          infoText="I agree to the terms and conditions of the service"
        />

        <Checkbox
          label="Newsletter Subscription"
          infoText="Receive weekly updates about new products and features"
          defaultIsSelected
        />
      </Vertical>
    </View>

    {/* Custom Styling */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        Custom Styling
      </Text>
      <Vertical gap={16}>
        <Checkbox
          label="Primary Theme"
          views={{
            checkbox: {
              backgroundColor: 'theme-primary',
              borderColor: 'theme-primary',
            },
            label: {
              color: 'theme-primary',
              fontWeight: '600',
            },
          }}
          defaultIsSelected
        />

        <Checkbox
          label="Custom Border Radius"
          views={{
            checkbox: {
              borderRadius: '50%',
              borderColor: 'color-purple-400',
              backgroundColor: 'color-purple-500',
            },
            label: {
              color: 'color-purple-700',
            },
          }}
          defaultIsSelected
        />

        <Checkbox
          label="Custom Shadow"
          shadow={{
            boxShadow: '0 4px 14px rgba(0, 0, 0, 0.1)',
          }}
          views={{
            checkbox: {
              borderRadius: '8px',
              backgroundColor: 'color-blue-500',
              transition: 'all 0.3s ease',
              _hover: {
                boxShadow: '0 6px 20px rgba(0, 0, 0, 0.15)',
                transform: 'scale(1.05)',
              },
            },
          }}
          defaultIsSelected
        />
      </Vertical>
    </View>

    {/* Group Example */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        Checkbox Group Example
      </Text>
      <Vertical
        gap={8}
        padding={16}
        backgroundColor="color-gray-50"
        borderRadius="8px"
      >
        <Text fontWeight="600" marginBottom={8}>
          Select your interests:
        </Text>
        <Checkbox label="Technology" defaultIsSelected />
        <Checkbox label="Design" />
        <Checkbox label="Business" />
        <Checkbox label="Marketing" defaultIsSelected />
        <Checkbox label="Finance" />
      </Vertical>
    </View>
  </Vertical>
);
```

### **Index**

```tsx
export * from './ColorScheme';
export * from './Default';
export * from './designSystem';
export * from './DisabledInput';
export * from './ErrorCheckbox';
export * from './FormCheckout';
export * from './IconCheckbox';
export * from './IndeterminateCheckbox';
export * from './ReadOnlyInput';
export * from './Shadow';
export * from './SizeInput';
export * from './StylesInput';
export * from './infoText';
```