Checkbox

The checkbox input type is used for boolean selections and multiple choice scenarios. It supports both single checkbox and multiple checkbox groups with different visual representations.

Properties

Required Properties

• name (string): Unique identifier for the field
• type (string): Must be 'checkbox'
• label (string): Display label for the field
• options (array): Array of checkbox options

Optional Properties

• position (string): Layout position - 'vertical' (default) or 'horizontal'
• view (string): Visual representation - 'default' or 'buttons'
• colSpan (number): Number of columns for grid layout
• data (string): API endpoint for dynamic options
• disabled (boolean): Whether the field is disabled
• layout (string): Layout type (default, horizontal)
• rules (array): Validation rules for the field

Option Properties

Each option in the options array can have:

• id (string): Unique identifier for the option
• text (string): Display text for the option
• value (string): Value returned when selected
• disabled (boolean): Whether the option is disabled
• icon (string): Icon class or emoji for the option
• imgUrl (string): Image URL for the option

Examples

Single Checkbox

{
  name: 'termsAccepted',
  type: 'checkbox',
  label: 'I accept the terms and conditions',
  options: [
    {
      id: 'terms',
      text: 'I accept the terms and conditions',
      value: 'accepted'
    }
  ],
  rules: ['required']
}

I accept the terms and conditions*

Multiple Checkboxes (Vertical)

{
  name: 'interests',
  type: 'checkbox',
  label: 'Select your interests',
  options: [
    { id: 'sports', text: 'Sports', value: 'sports' },
    { id: 'music', text: 'Music', value: 'music' },
    { id: 'reading', text: 'Reading', value: 'reading' },
    { id: 'travel', text: 'Travel', value: 'travel' },
    { id: 'cooking', text: 'Cooking', value: 'cooking' }
  ],
  rules: ['required']
}

Select your interests*

Multiple Checkboxes (Horizontal)

{
  name: 'skills',
  type: 'checkbox',
  label: 'Select your skills',
  position: 'horizontal',
  options: [
    { id: 'javascript', text: 'JavaScript', value: 'javascript' },
    { id: 'python', text: 'Python', value: 'python' },
    { id: 'react', text: 'React', value: 'react' },
    { id: 'vue', text: 'Vue.js', value: 'vue' },
    { id: 'node', text: 'Node.js', value: 'node' }
  ],
  rules: ['required']
}

Select your skills*

Checkbox Buttons View

{
  name: 'preferences',
  type: 'checkbox',
  label: 'Select your preferences',
  view: 'buttons',
  options: [
    { id: 'email', text: 'Email', value: 'email', icon: '📧' },
    { id: 'sms', text: 'SMS', value: 'sms', icon: '📱' },
    { id: 'push', text: 'Push', value: 'push', icon: '🔔' },
    { id: 'mail', text: 'Mail', value: 'mail', icon: '📬' }
  ],
  rules: ['required']
}

Select your preferences*

Checkbox with Validation

{
  name: 'categories',
  type: 'checkbox',
  label: 'Select product categories',
  options: [
    { id: 'electronics', text: 'Electronics', value: 'electronics' },
    { id: 'clothing', text: 'Clothing', value: 'clothing' },
    { id: 'books', text: 'Books', value: 'books' },
    { id: 'home', text: 'Home & Garden', value: 'home' }
  ],
  rules: [
    'required',
    {
      type: 'custom',
      function: '(value) => value && value.length >= 2',
      message: 'Please select at least 2 categories'
    }
  ]
}

Select product categories*

Complex Form with Multiple Checkbox Groups

const schema = [
  {
    name: 'firstName',
    type: 'text',
    label: 'First Name',
    placeholder: 'Enter your first name',
    rules: ['required'],
  },
  {
    name: 'lastName',
    type: 'text',
    label: 'Last Name',
    placeholder: 'Enter your last name',
    rules: ['required'],
  },
  {
    name: 'email',
    type: 'text',
    label: 'Email',
    placeholder: 'Enter your email',
    rules: ['required', 'email'],
  },
  {
    name: 'newsletter',
    type: 'checkbox',
    label: 'Newsletter subscription',
    options: [{ id: 'subscribe', text: 'Subscribe to newsletter', value: 'subscribe' }],
    rules: [],
  },
  {
    name: 'notifications',
    type: 'checkbox',
    label: 'Notification preferences',
    view: 'buttons',
    options: [
      { id: 'email', text: 'Email', value: 'email', icon: '📧' },
      { id: 'sms', text: 'SMS', value: 'sms', icon: '📱' },
      { id: 'push', text: 'Push', value: 'push', icon: '🔔' },
    ],
    rules: [],
  },
  {
    name: 'interests',
    type: 'checkbox',
    label: 'Areas of interest',
    position: 'horizontal',
    options: [
      { id: 'technology', text: 'Technology', value: 'technology' },
      { id: 'business', text: 'Business', value: 'business' },
      { id: 'health', text: 'Health & Fitness', value: 'health' },
      { id: 'education', text: 'Education', value: 'education' },
      { id: 'entertainment', text: 'Entertainment', value: 'entertainment' },
    ],
    rules: [],
  },
];

First Name*

Last Name*

Email*

Newsletter subscription

Notification preferences

Areas of interest

Settings Form with Checkboxes

const schema = [
  {
    name: 'accountSettings',
    type: 'checkbox',
    label: 'Account Settings',
    options: [
      { id: 'twoFactor', text: 'Enable two-factor authentication', value: 'twoFactor' },
      { id: 'publicProfile', text: 'Make profile public', value: 'publicProfile' },
      { id: 'emailVerified', text: 'Email verified', value: 'emailVerified', disabled: true },
    ],
    rules: [],
  },
  {
    name: 'privacySettings',
    type: 'checkbox',
    label: 'Privacy Settings',
    view: 'buttons',
    options: [
      { id: 'showEmail', text: 'Show Email', value: 'showEmail', icon: '👁️' },
      { id: 'showPhone', text: 'Show Phone', value: 'showPhone', icon: '📞' },
      { id: 'showLocation', text: 'Show Location', value: 'showLocation', icon: '📍' },
      { id: 'showBirthday', text: 'Show Birthday', value: 'showBirthday', icon: '🎂' },
    ],
    rules: [],
  },
  {
    name: 'permissions',
    type: 'checkbox',
    label: 'App Permissions',
    position: 'horizontal',
    options: [
      { id: 'camera', text: 'Camera Access', value: 'camera' },
      { id: 'location', text: 'Location Access', value: 'location' },
      { id: 'notifications', text: 'Notifications', value: 'notifications' },
      { id: 'storage', text: 'Storage Access', value: 'storage' },
      { id: 'microphone', text: 'Microphone', value: 'microphone' },
    ],
    rules: [],
  },
];

Account Settings

Privacy Settings

App Permissions

Validation Rules

Common Checkbox Validation Patterns

// Required selection
{
  type: 'required',
  message: 'Please select at least one option'
}

// Minimum selection count
{
  type: 'custom',
  function: '(value) => value && value.length >= 2',
  message: 'Please select at least 2 options'
}

// Maximum selection count
{
  type: 'custom',
  function: '(value) => !value || value.length <= 3',
  message: 'Please select no more than 3 options'
}

// Exact selection count
{
  type: 'custom',
  function: '(value) => value && value.length === 2',
  message: 'Please select exactly 2 options'
}

// Conditional validation
{
  type: 'custom',
  function: '(value, formValues) => {
    if (formValues.newsletter && formValues.newsletter.includes("subscribe")) {
      return value && value.length > 0;
    }
    return true;
  }',
  message: 'Please select at least one notification method if subscribing to newsletter'
}

Best Practices

1. Use clear, descriptive labels for each checkbox option
2. Group related options logically with appropriate section headers
3. Consider the layout - use horizontal for few options, vertical for many
4. Use the buttons view for visual appeal and better UX
5. Provide default values when appropriate
6. Implement proper validation for required selections and limits
7. Use icons and images to enhance visual recognition
8. Consider accessibility with proper labels and keyboard navigation
9. Test with different screen sizes for responsive design
10. Provide helpful error messages for validation failures
11. Use consistent styling across your application
12. Consider the user's mental model when organizing options