Checkbox

import { Checkbox } from 'twenty-ui/input';

export const EmailPreference = () => (
  <label>
    <Checkbox name="updates" value="email" defaultChecked />
    Receive product updates
  </label>
);

import { useState } from 'react';
import { Checkbox } from 'twenty-ui/input';

export const ColumnSelection = () => {
  const [showEmail, setShowEmail] = useState(true);
  const [showPhone, setShowPhone] = useState(false);

  return (
    <fieldset>
      <legend>Visible columns</legend>
      <label>
        <Checkbox
          checked={showEmail && showPhone}
          indeterminate={showEmail !== showPhone}
          onCheckedChange={(checked) => {
            setShowEmail(checked);
            setShowPhone(checked);
          }}
        />
        All columns
      </label>
      <label>
        <Checkbox checked={showEmail} onCheckedChange={setShowEmail} />
        Email
      </label>
      <label>
        <Checkbox checked={showPhone} onCheckedChange={setShowPhone} />
        Phone
      </label>
    </fieldset>
  );
};