Static
The static input type is used to display non-editable content within forms. It's perfect for showing information, instructions, disclaimers, or any static content that users need to see but cannot modify.
Properties
Required Properties
- name (string): Unique identifier for the field
- type (string): Must be 'static'
- label (string): Display label for the field
Optional Properties
- html (string): HTML content to display
- customClass (string): Additional CSS classes for styling
- disabled (boolean): Whether the field is disabled (not applicable for static)
- layout (string): Layout type (default, horizontal)
- rules (array): Validation rules (not applicable for static)
Examples
Basic Static Content
typescript
{
name: 'info',
type: 'static',
label: 'Information',
html: '<p class="text-sm text-gray-600">This is static content that cannot be edited by the user.</p>'
}Instructions
typescript
{
name: 'instructions',
type: 'static',
label: 'Instructions',
html: '<div class="text-sm text-blue-600 bg-blue-50 p-3 rounded-lg"><strong>How to proceed:</strong><ul class="mt-2 list-disc list-inside"><li>Fill in all required fields marked with *</li><li>Upload your documents in PDF format</li><li>Review your information before submitting</li></ul></div>'
}Disclaimer
typescript
{
name: 'disclaimer',
type: 'static',
label: 'Terms & Conditions',
html: '<div class="text-xs text-gray-500 bg-gray-50 p-3 rounded-lg border-l-4 border-yellow-400"><strong>Important:</strong> By submitting this form, you agree to our terms of service and privacy policy. Your information will be processed in accordance with our data protection guidelines.</div>'
}Status Information
typescript
{
name: 'status',
type: 'static',
label: 'Application Status',
html: '<div class="flex items-center gap-2 text-sm"><span class="w-3 h-3 bg-green-500 rounded-full"></span><span class="text-green-700 font-medium">Application Approved</span><span class="text-gray-500">• Approved on March 15, 2024</span></div>'
}Contact Information
typescript
{
name: 'contact',
type: 'static',
label: 'Contact Information',
html: '<div class="text-sm space-y-1"><p><strong>Email:</strong> support@example.com</p><p><strong>Phone:</strong> +1 (555) 123-4567</p><p><strong>Hours:</strong> Monday - Friday, 9:00 AM - 6:00 PM EST</p></div>'
}Progress Indicator
typescript
{
name: 'progress',
type: 'static',
label: 'Form Progress',
html: '<div class="w-full bg-gray-200 rounded-full h-2.5"><div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div></div><p class="text-xs text-gray-500 mt-1">Step 3 of 4 completed</p>'
}Complex Form with Static Content
typescript
const schema = [
{
name: 'welcome',
type: 'static',
label: 'Welcome',
html: '<div class="text-center py-4"><h3 class="text-lg font-semibold text-gray-800">Welcome to Our Platform</h3><p class="text-sm text-gray-600 mt-1">Please complete the form below to get started</p></div>',
},
{
name: 'instructions',
type: 'static',
label: 'Instructions',
html: '<div class="text-sm text-blue-600 bg-blue-50 p-3 rounded-lg"><strong>Before you begin:</strong><ul class="mt-2 list-disc list-inside"><li>Have your ID ready</li><li>Prepare your payment method</li><li>Set aside 5-10 minutes</li></ul></div>',
},
{
name: 'disclaimer',
type: 'static',
label: 'Legal Notice',
html: '<div class="text-xs text-gray-500 bg-gray-50 p-3 rounded-lg border-l-4 border-red-400"><strong>Legal Disclaimer:</strong> This form is for official use only. Providing false information may result in legal consequences.</div>',
},
];Best Practices
- Use clear and concise content that's easy to read and understand
- Apply appropriate styling with CSS classes for visual hierarchy
- Use semantic HTML for better accessibility
- Keep content relevant to the form context
- Use color coding to indicate importance (warnings, info, success)
- Include helpful instructions when forms are complex
- Provide contact information for user support
- Use progress indicators for multi-step forms