PxStateChecklist

A dynamic, schema-driven checklist component designed to render complex tri-state options (True/False/Flagged) for a predefined list of items. It supports optional text inputs per item based on the schema configuration.

Standard Checklist

Renders a list of items with True (✓), False (✗), and Flagged (⚑) options.

Standard Checklist

Auto Save

Dark Mode

Push Notifications

Send Telemetry Data

Hardware Acceleration

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

const data = ref({})
const field = {
  label: "System Preferences",
  type: "check_list",
  fields: {
    list_children: [
      { key: "auto_save", label: "Auto Save", components: [{ type: "radio", value: null }, { type: "checkbox", checked: false }] },
      { key: "dark_mode", label: "Dark Mode", components: [{ type: "radio", value: null }, { type: "checkbox", checked: false }] },
      { key: "notifications", label: "Push Notifications", components: [{ type: "radio", value: null }, { type: "checkbox", checked: false }] },
      { key: "telemetry", label: "Send Telemetry Data", components: [{ type: "radio", value: null }, { type: "checkbox", checked: false }] },
      { key: "hardware_accel", label: "Hardware Acceleration", components: [{ type: "radio", value: null }, { type: "checkbox", checked: false }] }
    ]
  }
}
</script>

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

Checklist With Inputs

If the schema contains input_father or input components for list children, the component automatically adapts to render text fields.

Checklist with Inputs

AdBlocker

Grammarly

Vue DevTools

React DevTools

<PxStateChecklist :field="inputSchema" v-model="data" :default-open="true" />

API Reference

Prop	Type	Default	Description
fieldrequired	FormSchemaField	—	—
modelValue	Record	—	—
defaultOpen	boolean	—	—

Exposed Methods

Can be accessed via a template ref to control the checklist programmatically:

Name	Description
clearAll()	Resets all selections and text inputs to their default empty states.
setRestFalse()	Sets the radio value to "no" for all items that haven't been answered yet.
setAllFalse()	Sets the radio value to "no" for all items, overwriting current answers.

NOTE

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