CheckListField

An accordion-style checklist component for schema-driven forms. Renders a collapsible group of checkbox/radio fields driven by a FormSchemaField configuration object.

Usage

<script setup>
import { ref } from 'vue'
import { CheckListField } from 'praxis-vue-ui'

const field = {
  label: 'Medical Conditions',
  fields: {
    list_children: [
      { components: [{ type: 'checkbox', name: 'diabetes', value: false }] },
      { components: [{ type: 'checkbox', name: 'hypertension', value: false }] },
    ]
  }
}

const data = ref({})
</script>

<template>
  <CheckListField :field="field" v-model="data" :default-open="true" />
</template>

Props

Prop	Type	Default	Description
fieldrequired	FormSchemaField	—	Schema definition for the checklist group including fields, labels, and types.
modelValue	Record<string, any>	{}	Current values for the checklist. Use with v-model.
defaultOpen	boolean	true	Whether the accordion is expanded by default.

Emits

Event	Payload	Description
update:modelValue	Record<string, any>	Emitted whenever a checkbox or radio value changes.

NOTE

This component is designed for schema-driven dynamic forms. For simple checklist needs without a schema, consider using PraxisCheckbox or CheckListInputField directly.