Checkbox Field
Single checkbox, tri-state, or checkbox group.
Checkbox Field
The checkbox field supports three modes:
- Single — boolean value (
true/false) - Tri-state —
true/false/null - Group — multiple selections (
string[])
Schema Properties
Single Checkbox
Prop
Type
Extends BaseField with:
type: "checkbox"hasMany?: false(default)tristate?: false(default)- Value type:
boolean
Tri-state Checkbox
Prop
Type
Extends BaseField with:
type: "checkbox"hasMany?: falsetristate: true- Value type:
boolean | null
Checkbox Group
Prop
Type
Extends BaseField with:
type: "checkbox"hasMany: trueoptions: FieldOption[] | string[]minSelected?: numbermaxSelected?: number- Value type:
string[]
Basic Usage
Single Checkbox
const schema = defineSchema({
fields: [
{
type: "checkbox",
name: "agree",
label: "I agree to the terms",
required: true,
},
],
});Tri-state Checkbox
{
type: "checkbox",
name: "confirmation",
label: "Do you confirm?",
tristate: true,
description: "Yes / No / Not sure",
}Checkbox Group
{
type: "checkbox",
name: "permissions",
label: "Permissions",
hasMany: true,
options: ["Read", "Write", "Delete"],
minSelected: 1,
}Examples
Newsletter Signup
{
type: "checkbox",
name: "newsletter",
label: "Subscribe to newsletter",
defaultValue: true,
}Required Checkbox
{
type: "checkbox",
name: "terms",
label: "I accept the terms and conditions",
required: true,
}Checkbox Group with Descriptions
{
type: "checkbox",
name: "notifications",
label: "Notification Preferences",
hasMany: true,
options: [
{ label: "Email", value: "email", ui: { description: "Receive email notifications" } },
{ label: "SMS", value: "sms", ui: { description: "Receive text messages" } },
{ label: "Push", value: "push", ui: { description: "Receive push notifications" } },
],
}Auto-Derived Validators
| Property | Validator |
|---|---|
required: true | required |
hasMany: true + minSelected | minSelected |
hasMany: true + maxSelected | maxSelected |
Value Types
| Mode | Type |
|---|---|
| Single | boolean |
| Tri-state | boolean | null |
| Group | string[] |