Class 32 Dynamic Forms

Dynamic Forms

Resource - Modern Web Form Design

Resource - React Forms

Form Fields

<Input /> The component displays a one-line input field. The input type could be either text or number. Let's have a look at the props that we need to create an component.

• type — The type prop determines whether the input field rendered is of type, text, or number. For instance, if the value of type is equal to number, then will be rendered. Otherwise, gets rendered.
• title — The value of the title prop will be displayed as a label of that particular field.
• name — This is the name attribute for the input.
• value — The value (either text or number) that should be displayed inside the input field. You can use this prop to give default value.
• placeholder — An optional string that you can pass so that the input field displays a placeholder text.
• handleChange — A control function that gets triggered when the input control element's value changes. The function then updates the state of the parent component and passes the new value through the value prop.

<Select /> The component displays a list of drop-down items. Usually, there will be a placeholder text or a default value for the drop-down. Here are the props for the :

• title — The value of the title prop be displayed as label of the element. name — The name attribute for the element.
• options — An array of available options. For instance, we are using the to display a drop-down list of gender options.
• value — The value prop can be used to set the default value of the field.
• placeholder — A short string that populates the first tag.
• handleChange — A control function that gets triggered when the input control element's value changes. The function then updates the state of the parent component and passes the new value through the value prop.