PxInfoField

A compact, read-only label/value pair. Useful for detail panels, summary cards, or profile views where you need to display data without an input field.

Usage

Demo

Full Name:

Alice Smith

Department:

Engineering

Status:

Active

<script setup>
import { PxInfoField } from 'praxis-vue-ui'
</script>

<template>
  <PxInfoField label="Full Name:" value="Alice Smith" />
  <PxInfoField label="Department:" value="Engineering" />
  <PxInfoField label="Status:" value="Active" value-class="text-green-600 font-semibold" />
</template>

With Icon

With Icon

Owner:

Alice Smith

<script setup>
import { User } from '@lucide/vue'
import { PxInfoField } from 'praxis-vue-ui'
</script>

<template>
  <PxInfoField label="Owner:" value="Alice Smith">
    <template #icon>
      <User class="w-4 h-4" />
    </template>
  </PxInfoField>
</template>

API Reference

Prop	Type	Default	Description
labelrequired	string	—	—
value	string | number	"N/A"	—
valueClass	string	""	—