React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

Form

Dynamic form builder with validation, custom questions, and address collection

Interactive Playground

Customize the form properties and see the changes in real-time

Form Status

Valid: ❌

Data: None

How did you hear about us?

Question Types

Different question types supported by the form

Text Question

Dropdown Question

Select your industry

Radio Question

Checkbox Question

Features

  • ✓ Base fields: Name and Email with validation
  • ✓ Optional message/note field
  • ✓ Custom questions with multiple types (text, dropdown, radio, checkbox)
  • ✓ Phone number input with country code selection
  • ✓ Address collection with Google Maps autocomplete
  • ✓ Manual address entry fallback
  • ✓ Email spell checking with suggestions
  • ✓ Form validation with error messages
  • ✓ Required field enforcement
  • ✓ Imperative validation via ref
  • ✓ Cached answers support
  • ✓ Autofill support

API Reference

Props

showBase

boolean - Show name and email fields (default: true)

showMessage

boolean - Show optional message field (default: false)

showAddress

boolean - Show address fields (default: false)

questions

Question[] - Array of custom questions to display

disabled

boolean - Disable all form inputs (default: false)

cachedQuestionAnswers

Record<string, any> - Pre-filled answers

autofillQuestionAnswers

Record<string, any> - Autofill values

onSetFanDetails

(details: any) => void - Callback when form data changes

onFormIsValid

(valid: boolean) => void - Callback when validation state changes

onSetAnswers

(answers: any[]) => void - Callback when answers change

onSetNote

(note: string | undefined) => void - Callback when note changes

Question Type

type

'text' | 'dropdown' | 'radio' | 'checkbox' | 'phone' - Question input type

content

string - Question text/label

required

boolean - Whether answer is required

enabled

boolean - Whether question is enabled (for phone type)

options

{ value: string; name?: string }[] - Options for dropdown, radio, checkbox

Ref Methods

validateForm

() => FormIssue[] - Validates form and returns array of issues