Checkbox

import React from 'react';
import { Checkbox } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center gap-2'>
      <Checkbox />
    </div>
  );
}

import React from 'react';
import { Checkbox } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center gap-2'>
      <Checkbox />
      <Checkbox defaultChecked />
      <Checkbox disabled />
      <Checkbox disabled defaultChecked />
    </div>
  );
}

import React from 'react';
import { Checkbox } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex flex-col items-center justify-center gap-4">
      <div className="flex items-center justify-center gap-2">
        <Checkbox defaultChecked color='primary' size='lg' />
        <Checkbox defaultChecked color='primary' size='md' />
        <Checkbox defaultChecked color='primary' size='sm' />
      </div>
      <div className="flex items-center justify-center gap-2">
        <Checkbox defaultChecked color='secondary' size='lg' />
        <Checkbox defaultChecked color='secondary' size='md' />
        <Checkbox defaultChecked color='secondary' size='sm' />
      </div>
    </div>
  );
}

import React from 'react';
import { Checkbox } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Checkbox defaultChecked color='primary'  />
      <Checkbox defaultChecked color='secondary' />
      <Checkbox defaultChecked color='info' />
      <Checkbox defaultChecked color='warning' />
      <Checkbox defaultChecked color='success' />
      <Checkbox defaultChecked color='error' />
    </div>
  );
}

import React from 'react';
import { Checkbox } from 'archi-ui'
import { CheckCheck } from 'lucide-react'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center gap-2">
      <Checkbox defaultChecked />
      <Checkbox defaultChecked checkedIcon={<CheckCheck />} />
    </div>
  );
}

"use client"
 
import React, { useState } from 'react'
import { Checkbox, FormControl, Label } from 'archi-ui'
 
export default function MyReactPage() {
 
  const [checked, setChecked] = useState([true, false]);
 
  const handleChange1 = (event) => {
    setChecked([event.target.checked, event.target.checked]);
  };
 
  const handleChange2 = (event) => {
    setChecked([event.target.checked, checked[1]]);
  };
 
  const handleChange3 = (event) => {
    setChecked([checked[0], event.target.checked]);
  };
  return (
    <div className='flex flex-col items-center justify-center gap-2'>
      <FormControl>
        <Checkbox
          checked={checked[0] && checked[1]}
          indeterminate={checked[0] !== checked[1]}
          onChange={handleChange1}
        />
        <Label htmlFor='parent'>Parent</Label>
      </FormControl>
      <div className="flex flex-col ml-4 gap-2">
        <FormControl>
          <Checkbox checked={checked[0]} onChange={handleChange2} />
          <Label htmlFor='child1'>Child1</Label>
        </FormControl>
        <FormControl>
          <Checkbox checked={checked[1]} onChange={handleChange3} />
          <Label htmlFor='child2'>Child2</Label>
        </FormControl>
      </div>
    </div>
  );
}

"use client"
 
import React, { useState } from 'react';
import { Checkbox } from 'archi-ui'
 
export default function MyReactPage() {
 
  const [check, setCheck] = useState(false);
 
  const handleCheck = () => {
    setCheck(!check)
  }
 
  return (
    <div className="flex items-center justify-center gap-2">
      <Checkbox checked={check} onChange={handleCheck} />
      <p>Checkbox is checked: {String(check)}</p>
    </div>
  );
}