onSubmitreq- Type
(data: any) => void- Default
- -
- Description
- Callback triggered when form validation passes.
Components / Inputs
Grievance Form
குறைதீர்வு படிவம்
A form layout for users to log issues, network delays, and service discrepancies directly to support supervisors.
பணியாளர்கள் அல்லது பயனர்கள் வன்பொருள் கோளாறுகள் மற்றும் நெட்வொர்க் சிக்கல்களைப் புகாரளிக்க உதவும் ஒரு படிவக் கூறு.
Part of Ration Shop POS Block
This component is featured in the comprehensive Ration Shop Point of Sale block pattern.
Interactive Preview
Component preview
Grievance Formகுறைதீர்வு படிவம்Anatomy
Structure
Anatomy
4 parts documented for implementation and review.
1
Toggle Button
மாற்று பொத்தான்required<button>Action button that switches the UI between the active tickets list and the ticket registration form.
2
Grievance Form
புகார் படிவம்<form>Accessible form fields including input text, dropdown select, and textarea elements.
3
Success Panel
வெற்றி அகம்<div>A post-submit display confirming generating the ticket ID and dispatching it to supervisors.
4
Tickets Ledger
புகார் பதிவேடு<div>List of existing tickets showing subject, category, submission date, and current status badges.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
onSubmitreq | (data: any) => void | - | Callback triggered when form validation passes. |
Best practices
Provide copyable ticket reference
நகலெடுக்கக்கூடிய எண் வழங்கவும்
Output a unique ticket reference ID upon successful form submission and allow users to copy it easily.
விண்ணப்பத்தை சமர்ப்பித்த பின் தனித்துவமான புகார் எண்ணை வழங்கி, அதை எளிதாக நகலெடுக்க வழிவகை செய்யுங்கள்.
Don't use excessive secondary actions
கூடுதல் பொத்தான்களைத் தவிர்க்கவும்
Avoid cluttering the form interface with clear or reset actions that could lead to accidental form loss.
படிவத்தை முழுமையாக அழிக்கும் பொத்தான்களைக் கொடுக்க வேண்டாம்; இது தவறுதலாக அழுத்தப்பட்டு தரவை இழக்க வழிவகுக்கும்.
Accessibility
- Form controls utilize native semantic elements and explicitly define
requiredproperties to leverage browser-native form validation. - Success state transitions are animated and announce generating ticket details dynamically.
- Badges use HSL theme colors mapped from Tailwind CSS, offering a minimum of 4.5:1 color contrast.