RadioGroup

import { Radio, RadioGroup } from '@bindshq/stance-react';

export function Basic() {
  return (
    <RadioGroup label="Signing order" defaultValue="parallel">
      <Radio
        value="parallel"
        label="Any order"
        description="Everyone receives the request at once."
      />
      <Radio
        value="sequential"
        label="One after another"
        description="Each signer is notified when the previous one finishes."
      />
    </RadioGroup>
  );
}

import { Radio, RadioGroup } from '@bindshq/stance-react';

export function Cards() {
  return (
    <RadioGroup
      label="Deployment method"
      variant="card"
      defaultValue="relay"
      orientation="horizontal"
    >
      <Radio
        value="relay"
        label="Exchange relay"
        description="Signatures are applied server-side to every outgoing email."
      />
      <Radio
        value="addin"
        label="Outlook add-in"
        description="Users pick their signature while composing."
      />
      <Radio
        value="manual"
        label="Manual install"
        description="Users copy the HTML into their mail client."
      />
    </RadioGroup>
  );
}

import { Radio, RadioGroup } from '@bindshq/stance-react';

export function Horizontal() {
  return (
    <RadioGroup label="Logo size" orientation="horizontal" defaultValue="md" size="sm">
      <Radio value="sm" label="Small" />
      <Radio value="md" label="Medium" />
      <Radio value="lg" label="Large" />
    </RadioGroup>
  );
}

import { Radio, RadioGroup } from '@bindshq/stance-react';

export function Validation() {
  return (
    <RadioGroup label="Plan" required error="Choose a plan to continue">
      <Radio value="starter" label="Starter" />
      <Radio value="team" label="Team" />
      <Radio value="enterprise" label="Enterprise" description="Contact sales" disabled />
    </RadioGroup>
  );
}