skills.rest
HiokKuek
HiokKuekCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

sgds-forms

Implements form validation patterns for SGDS web components using constraint validation and setInvalid.

Updated Sep 5, 2026
Search Tags:#web components#form validation#constraint validation#formdata#sgds#singapore design system#setinvalid
One-click install
npx skills add https://github.com/HiokKuek/hdb_pricing --skill sgds-forms-hiokkuek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sgds-forms
Source: https://github.com/HiokKuek/hdb_pricing/tree/main/.agents/skills/sgds-forms
Command: npx skills add https://github.com/HiokKuek/hdb_pricing --skill sgds-forms-hiokkuek

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers using Singapore Design System (SGDS) form components often struggle to wire up validation correctly — error messages not appearing, forms submitting with invalid data, or confusion about integrating third-party validators like Zod. This Skill provides the exact patterns for making SGDS components behave like native form controls. ## Core Features & Use Cases - Constraint Validation Setup: Configure required, pattern, min, max, and other constraints per component, with hasFeedback controlling whether error text, styling, or both are displayed. - FormData Submission Handling: Read submitted values via the native FormData API, including special handling for <sgds-file-upload> files through the selectedFiles property. - Custom Validation Integration: Disable built-in validation with noValidate or novalidate, then drive invalid states programmatically with setInvalid(bool) and invalidFeedback for libraries like Zod. - Use Case: You are building a government service appointment form with SGDS components and need per-field error messages, blocked submission on invalid input, and a custom rule that rejects keys starting with special characters. ## Quick Start Show me how to build an SGDS form with required fields, visible error feedback, and FormData submission handling.

Frequently Asked Questions about sgds-forms

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I show validation error messages on SGDS form components?▼

Add the hasFeedback attribute to the SGDS component to display validation messages. Use hasFeedback="both" to show both the invalid border styling and error text, and override the default message with the invalidFeedback property.

How do I read values from an SGDS form on submit?▼

Use new FormData(event.target) inside the form's submit handler, since SGDS components participate in native form submission when given a name attribute. For sgds-file-upload, read files separately from the component's selectedFiles property.

Can I use Zod or custom validation with SGDS form components?▼

Yes, disable built-in validation first with noValidate on the component or novalidate on the form element. Then call element.setInvalid(true) and set element.invalidFeedback inside event listeners like sgds-input or sgds-change to apply your custom rules.

Why is my SGDS form not showing error messages even though validation fails?▼

Constraint validation runs silently unless hasFeedback is present on the component. Without hasFeedback, the field is marked invalid and blocks submission, but no visible error text or styling is rendered.

Which validation constraints does each SGDS form component support?▼

sgds-input supports required, pattern, min, max, minlength, and maxlength; sgds-textarea supports required and length constraints; sgds-datepicker supports required, minDate, and maxDate. Select, combo-box, radio-group, checkbox-group, and file-upload support required only.

Related Skills

Explore More Software Engineering Skills→
GovTechSGGovTechSG
18

sgds-forms

Validate SGDS form components with constraint and custom validation APIs.

Official
Intermediate
AI-Staffing-Solution-Consultants-LLCAI-Staffing-Solution-Consultants-LLC

agency-engineering-api-engineer

Implements API endpoints, middleware, and request/response validation logic.

Official
Basic
Maitreya04Maitreya04

top-design

Design typography-focused digital experiences with motion storytelling and scalable layouts.

Community
Advanced
Layer-FiLayer-Fi
10

forms

Builds validated React forms using TanStack Form with pre-bound field components.

Official
Intermediate