- Extend our generic Field component to include a number editor using the native number input.
- Firstly, add "Number" to the type prop:
interface IFieldProps {
...
type?: "Text" | "Email" | "Select" | "TextArea" | "Number";
}
- Include the "Number" type when rendering the input:
{(type === "Text" || type === "Email" || type === "Number") && (
<input
type={type.toLowerCase()}
id={name}
value={context.values[name]}
onChange={e => handleChange(e, context)}
onBlur={e => handleBlur(e, context)}
/>
)}
- Implement an urgency field on the Contact Us form to indicate how urgent a response is. The field should be numeric.
Add the following field immediately after the notes field:
<Form.Field name="urgency" label...