Forms components: compare

All Forms componentsCopy Anchor Link

5 components, A to Z.

• Date Range Picker

  date-range-picker

  Date range picker field: an outline button showing the formatted range opens a popover with a two-month range Calendar. Works controlled or uncontrolled and formats dates with date-fns.

• Issue Report Form

  issue-report-form

  

  Issue report form card with area and severity selects, a subject input and a details textarea under monospace uppercase labels. Validates with react-hook-form and zod, sends FormData to a React action, then resets.

• Loop Settings Form

  loop-settings-form

  Loop settings form card for audio or video tools: loop in and out times typed as m:ss, a large computed loop length, and fade in and out times in a collapsible section. Controlled or uncontrolled.

• Newsletter Form

  newsletter-form

  Newsletter signup form with an email field in two styles: a filled input group with the button inside, or a footer line with an arrow button. Posts to a URL or Server Function and announces status text.

• Payment Method Form

  payment-method-form

  Payment method form card with cardholder name, a plan radio group, card number, expiry month and year selects and a CVC field. Validated with react-hook-form and zod; expiry years come from the browser date.