Boolean builder rendered as a checkbox. Best for agreements, legal acceptance, and opt-in flags.
mustBeTrue()turns the checkbox into a hard validation gate - submit is blocked until checked- For settings and preferences that toggle on/off, prefer
field.switch()instead - The label is the clickable text next to the checkbox
Checkbox.web.tsxtsx
| 1 | const schema = { |
| 2 | terms: field.checkbox('I accept the Terms of Service') |
| 3 | .mustBeTrue('Please accept the terms to continue.'), |
| 4 | } |
Defaults, inheritance & field methods
- defaultValue is
false - type is
checkbox - Shared methods: see Base field builder
Checkbox-specific methods:
| Method | Type | Description |
|---|---|---|
mustBeTrue(message?) | message?: string | Blocks submit unless the checkbox is checked. |
Recipes
Patterns that showcase checkbox-specific use cases.
Legal gate
TermsGate.tsxtsx
| 1 | const schema = { |
| 2 | terms: field.checkbox('I accept the Terms of Service') |
| 3 | .mustBeTrue('You must accept the terms to continue.'), |
| 4 | } |
GDPR consent with hint
GdprConsent.tsxtsx
| 1 | const schema = { |
| 2 | dataProcessing: field.checkbox('Allow data processing') |
| 3 | .mustBeTrue() |
| 4 | .hint('Required by EU regulation'), |
| 5 | } |
Optional newsletter opt-in
Newsletter.tsxtsx
| 1 | const schema = { |
| 2 | productUpdates: field.checkbox('Send me product updates') |
| 3 | .hint('You can unsubscribe any time'), |
| 4 | } |