Switch

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

export function Basic() {
  return <Switch label="Automatic deployment" defaultChecked />;
}

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

export function WithDescription() {
  return (
    <Switch
      label="Require two-factor authentication"
      description="All administrators must confirm sign-in with a second factor."
    />
  );
}

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

export function SettingsList() {
  const [settings, setSettings] = React.useState({
    banner: true,
    tracking: false,
    reminders: true,
  });
  const rows: { key: keyof typeof settings; label: string; description: string }[] = [
    {
      key: 'banner',
      label: 'Campaign banner',
      description: 'Show the current campaign below every signature.',
    },
    { key: 'tracking', label: 'Link tracking', description: 'Count clicks on signature links.' },
    {
      key: 'reminders',
      label: 'Signing reminders',
      description: 'Remind signers every three days.',
    },
  ];
  return (
    <div style={{ display: 'grid', gap: 20, width: '100%', maxWidth: 520 }}>
      {rows.map((r) => (
        <Switch
          key={r.key}
          label={r.label}
          description={r.description}
          labelPosition="start"
          style={{ justifyContent: 'space-between', width: '100%' }}
          checked={settings[r.key]}
          onCheckedChange={(v) => setSettings((s) => ({ ...s, [r.key]: v }))}
        />
      ))}
    </div>
  );
}

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

export function States() {
  return (
    <div style={{ display: 'grid', gap: 14 }}>
      <Switch size="sm" label="Small" defaultChecked />
      <Switch label="Disabled" disabled />
      <Switch label="Disabled on" disabled defaultChecked />
      <FormField label="Single sign-on" description="Managed by your identity provider" readOnly>
        <Switch defaultChecked />
      </FormField>
    </div>
  );
}