Checkbox
freeCheckbox input with custom checkmark icons, container styling, and boolean value support.
Overview
The Checkbox component renders a single yes/no toggle with a custom SVG checkmark. Supports checked/unchecked value mapping (e.g., "yes"/"no" or "true"/"false"), multiple icon styles, and container styling for both checked and unchecked states.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
name | String | "agreement" | Field name used in form data. |
label | String | "I agree to the terms" | Label displayed next to the checkbox. |
defaultChecked | Boolean | false | Whether the checkbox starts checked. |
checkedValue | String | "yes" | Value sent when checked. |
uncheckedValue | String | "no" | Value sent when unchecked. |
required | Boolean | false | When required, the checkbox must be checked to submit. |
Features
- Custom icon types: check, circle, x, hidden, or custom SVG
- Separate checked/unchecked container styles (background, border)
- Configurable checked/unchecked string values
- Hidden native checkbox for accessibility
- Checkbox can be visually hidden while label remains clickable
Tips
Use required for terms of service or consent checkboxes — required means "must be checked."
Set checkedValue/uncheckedValue to match your backend expectations (e.g., "true"/"false").
Use iconType "hidden" if you want a styled container without a visible checkbox icon.
Validation
This component uses checkbox validation. See the Validation Guide for details on configuring rules and error messages.