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.

<template>
    <VsInputCheckbox v-model="value" :options />
</template>
<script setup>
import { VsInputCheckbox } from '@opengis/form'
const value = ref({});

const options = [
  { id: 'camera', text: 'Camera Access', value: 'camera' },
  { id: 'location', text: 'Location Access', value: 'location' },
  
];
</script>

{}

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

interface

interface CheckboxProps {
  name: string;
  type: string;
  label: string;
  options: OptionsData[];
  position?: string;
  view?: 'default' | 'buttons';
  colSpan?: number;
  data?: string;
  disabled?: boolean;
  layout?: 'default' | 'horizontal';
  rules?: string[];
}

interface OptionsData {
    id: string;
    text: string;
    value: string;
    disabled: boolean;
    icon: string;
  }

Position

Layout position - vertical (default) or horizontal

<VsInputCheckbox v-model="value" :options position="horizontal"/>

horizontal

vertical

{}

View

Visual representation - default or buttons

<VsInputCheckbox v-model="value" :options view="buttons"/>

default

buttons

{}

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'
    }
  ]
}

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