Playbook: Add a Form Control

Steps

Follow this process for a new form control or form pattern.

• Add the entry to lib/form-element-catalog.ts.
• Render the control in components/form-element-showcase.tsx or a dedicated form showcase file.
• Use --textfield-focus-color for focus state.
• Support disabled, readonly, invalid, and valid states if applicable.
• Add dark theme overrides for surface, text, border, placeholder, menu, and focus.
• The documentation reference page is generated automatically from the form catalog.
• Run npm run check and manually test custom primary colors.