CheckboxGroup

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

export function Basic() {
  return (
    <CheckboxGroup
      label="Notify me when"
      description="Notifications are sent to your work email."
      defaultValue={['signed']}
    >
      <Checkbox value="viewed" label="A signer opens the document" />
      <Checkbox value="signed" label="A signer completes signing" />
      <Checkbox value="declined" label="A signer declines" />
      <Checkbox value="expired" label="A request expires" />
    </CheckboxGroup>
  );
}

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

export function Horizontal() {
  return (
    <CheckboxGroup
      label="Show in signature"
      orientation="horizontal"
      defaultValue={['phone', 'logo']}
    >
      <Checkbox value="phone" label="Phone" />
      <Checkbox value="address" label="Address" />
      <Checkbox value="logo" label="Logo" />
      <Checkbox value="social" label="Social links" />
    </CheckboxGroup>
  );
}

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

export function Validation() {
  return (
    <CheckboxGroup label="Deploy to" required error="Choose at least one destination">
      <Checkbox value="m365" label="Microsoft 365" />
      <Checkbox value="google" label="Google Workspace" />
    </CheckboxGroup>
  );
}

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

export function Controlled() {
  const [value, setValue] = React.useState<string[]>(['pdf']);
  return (
    <div style={{ display: 'grid', gap: 12 }}>
      <CheckboxGroup label="Export formats" value={value} onValueChange={setValue}>
        <Checkbox value="pdf" label="PDF" />
        <Checkbox value="docx" label="Word (DOCX)" />
        <Checkbox value="html" label="HTML" />
      </CheckboxGroup>
      <span style={{ fontSize: 14 }}>Selected: {value.join(', ') || 'none'}</span>
    </div>
  );
}