Checkbox

import { Checkbox } from '@bindshq/stance-react';

export function Basic() {
  return <Checkbox label="Send a copy of the signed document to all parties" defaultChecked />;
}

import { Checkbox } from '@bindshq/stance-react';

export function WithDescription() {
  return (
    <Checkbox
      label="Require signer authentication"
      description="Signers confirm a one-time code sent to their email before signing."
    />
  );
}

import * as React from 'react';
import { Checkbox } from '@bindshq/stance-react';

const documents = ['Mutual NDA', 'Master services agreement', 'Data processing addendum'];

export function Indeterminate() {
  const [selected, setSelected] = React.useState<string[]>(['Mutual NDA']);
  const all = selected.length === documents.length;
  const some = selected.length > 0 && !all;
  return (
    <div style={{ display: 'grid', gap: 10 }}>
      <Checkbox
        label="Select all documents"
        checked={all ? true : some ? 'indeterminate' : false}
        onCheckedChange={(c) => setSelected(c ? documents : [])}
      />
      <div style={{ display: 'grid', gap: 10, paddingLeft: 28 }}>
        {documents.map((d) => (
          <Checkbox
            key={d}
            label={d}
            checked={selected.includes(d)}
            onCheckedChange={(c) => setSelected((s) => (c ? [...s, d] : s.filter((x) => x !== d)))}
          />
        ))}
      </div>
    </div>
  );
}

import { Checkbox, FormField } from '@bindshq/stance-react';

export function States() {
  return (
    <div style={{ display: 'grid', gap: 12 }}>
      <Checkbox size="sm" label="Small" defaultChecked />
      <Checkbox label="Disabled" disabled />
      <Checkbox label="Disabled and checked" disabled defaultChecked />
      <FormField label="Accept the terms of service" error="You must accept the terms to continue">
        <Checkbox />
      </FormField>
    </div>
  );
}