ConsentCheckbox

import SwiftUI
import EandTokens

// checkbox-variants: a 20pt checkbox, gap 8, then ONE wrapping body/md run —
// prefix · link · "and" · link · suffix. Links are body/md link ink, no underline.
// Tapping a link opens it; tapping the box toggles it.
struct ConsentCheckbox: View {
  @Binding var on: Bool
  var body: some View {
    HStack(alignment: .top, spacing: EandSpacing.sm) {
      CheckboxMark(on: on).onTapGesture { on.toggle() }     // see Checkbox
      Text("Agree to the [Terms & Conditions](eand://terms) and [Privacy Policy](eand://privacy) before proceeding")
        .font(.system(size: EandTypography.bodyMd.size))
        .foregroundColor(EandColor.textDefaultDefault)
        .tint(EandColor.buttonLinkTextBrandDefault)
    }
    .accessibilityElement(children: .combine)
    .accessibilityAddTraits(on ? .isSelected : [])
  }
}

When to use

• Use when a person must accept terms before going on, typically in the terms slot of the CTA Bar or an ActionBlock.
• Don't use for ordinary options or preferences; that is Checkbox, or Switcher for a setting that applies at once.

Anatomy

The label is one wrapping sentence: prefix · first link · conjunction · second link · suffix, for example "Agree to the Terms and Privacy Policy before proceeding". Two links are joined by conjunction (default "and").

• A link with href renders as an anchor; without it, as a button that calls onClick.
• Selecting a link follows it without toggling the box. Selecting the rest of the sentence toggles the box.
• disabled disables the box and its links together.

The box is always the md (20px) checkbox. Besides its own props, ConsentCheckbox accepts the props of Checkbox — checked, defaultChecked, onChange, disabled and inverse — and passes them through.

import { useState } from 'react';
import { ConsentCheckbox } from '@eand/react-design-system';

function Terms() {
  const [agreed, setAgreed] = useState(false);
  return (
    <ConsentCheckbox
      checked={agreed}
      onChange={(e) => setAgreed(e.currentTarget.checked)}
      prefix="Agree to the"
      links={[
        { label: 'Terms', href: '/terms' },
        { label: 'Privacy Policy', href: '/privacy' },
      ]}
      suffix="before proceeding"
    />
  );
}

Props

Design

Figma source: checkbox-variants — etisalat Consumer App DSL V1.2

• A md checkbox, then the sentence 8px away (spacing/sm), in body/md.
• Copy: text/default/default, or text/default/disabled when disabled. Inverse: text/default/inverse-subtle and text/default/inverse-disabled.
• Links follow button type=link size=md: body/md, 2px inline padding (spacing/2xs), no underline, in button/link/text/brand/* or, inverse, button/link/text/inverse/*.
• The core .checkbox-core-variants-core has an RTL mirror; the flex row follows dir.