Skip to content

Creating a Text Box Component

Create a component using schematics and name it with your initial E.g:


We are going to make it render the Material UI's text field at, which displays text input, similar to the existing sc-text-box.

To do this:

  1. Install the @material-ui/core module with:

    yarn add @material-ui/core
  2. Import the Text Field component in src/components/JdTextBox.tsx with:

    import TextField from '@material-ui/core/TextField';
  3. Add the onChange handler:

    ```javascript function onChange(event) { setValue(;

    changedDocumentService.valueChanged({ document, fieldName, fieldValue, formParameters, template, componentDefinition, key },; } 4. Replace the JSX:html

    jd-text-box works. Please edit src/components/JdTextBox.tsx to make changes

    Next Steps

      . . . .
    ``` To:

html <TextField onChange={onChange} required={componentDefinition.mandatory} id={} label={componentDefinition.label} value={value} />

You should see the component build in the npm watch window:

webpack 5.14.0 compiled <span style="color:green">successfully</span> in 208 ms
  1. Reload the component test template. A text box will display:


This example is available at