Function Form

Form<T extends Record<string, FieldRecord>>(
    props: {
        fields?: T;
        title?: string;
        subtitle?: string;
        submitLabel?: string;
    },
    ctx: Scene<never>,
): {
    node: HTMLDivElement;
    data(): {
        [K in string
        | number
        | symbol]: (...)[(...)] extends Component<(...), (...)>
            ? (...)[(...)]
            : never
    };
}
Dynamic form component that creates a complete form with multiple fields
Type Parameters
- T extends Record<string, FieldRecord>
  Record type defining the form fields and their configurations
Parameters
- props: { fields?: T; title?: string; subtitle?: string; submitLabel?: string }
  - Optionalfields?: T
    Configuration object defining all form fields
  - Optionaltitle?: string
    Main title displayed at the top of the form
  - Optionalsubtitle?: string
    Subtitle or description text below the title
  - OptionalsubmitLabel?: string
    Text for the submit button (defaults to 'OK')
- ctx: Scene<never>
Returns {
    node: HTMLDivElement;
    data(): {
        [K in string
        | number
        | symbol]: (...)[(...)] extends Component<(...), (...)>
            ? (...)[(...)]
            : never
    };
}
Example
```
using form = app.scene(generic(Form), {
  defaultProps: {
    title: 'Participant Information',
    subtitle: 'Please fill out the following information',
  },
});

const formData = await form.show({
  fields: {
    name: {
      type: 'TextField',
      label: 'Full Name',
      validate: (value) =>
        value.length >= 2 || 'Name must be at least 2 characters',
    },
    age: {
      type: 'NumberField',
      label: 'Age',
      min: 18,
      max: 100,
    },
    consent: {
      type: 'Checkbox',
      label: 'I consent to participate in this study',
    },
  },
});

console.log(formData.name); // string
console.log(formData.age); // number
console.log(formData.consent); // boolean
```
See
TextField , NumberField, TextArea, Select, Checkbox, Radio
- Defined in packages/psytask/src/components/form.ts:321

Function Form

Type Parameters

Parameters

`Optional`fields?: T

`Optional`title?: string

`Optional`subtitle?: string

`Optional`submitLabel?: string

Returns {
    node: HTMLDivElement;
    data(): {
        [K in string
        | number
        | symbol]: (...)[(...)] extends Component<(...), (...)>
            ? (...)[(...)]
            : never
    };
}

Example

See

Settings

Function Form

Type Parameters

Parameters

Optionalfields?: T

Optionaltitle?: string

Optionalsubtitle?: string

OptionalsubmitLabel?: string

Returns { node: HTMLDivElement; data(): { [K in string | number | symbol]: (...)[(...)] extends Component<(...), (...)> ? (...)[(...)] : never };}

Example

See

Settings

`Optional`fields?: T

`Optional`title?: string

`Optional`subtitle?: string

`Optional`submitLabel?: string

Returns {
node: HTMLDivElement;
data(): {
[K in string
| number
| symbol]: (...)[(...)] extends Component<(...), (...)>
? (...)[(...)]
: never
};
}