# Using mui input fields like TextField, Select, Radio button to create custom renderers?

**URL:** <https://jsonforms.discourse.group/t/using-mui-input-fields-like-textfield-select-radio-button-to-create-custom-renderers/874>\
**Category:** General\
**Created:** [July 6, 2022, 10:28am UTC](https://jsonforms.discourse.group/t/using-mui-input-fields-like-textfield-select-radio-button-to-create-custom-renderers/874 "2022-07-06T10:28:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![AhsanSaleemMemon](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/ahsansaleemmemon/32/384_2.png) [@AhsanSaleemMemon](https://jsonforms.discourse.group/u/AhsanSaleemMemon)\
**Post date:** [July 6, 2022, 10:28am UTC](https://jsonforms.discourse.group/t/using-mui-input-fields-like-textfield-select-radio-button-to-create-custom-renderers/874/1 "2022-07-06T10:28:34Z")

</div>

Can I create custom renderers using mui input fields like TextField ([React Text Field component - Material UI](https://mui.com/material-ui/react-text-field/)), Select, Radio button?

And also, can I use one custom renderer for multiple fields like if there’s a schema as follows

```auto

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "minLength": 1
    },
    "description": {
      "title": "Long Description",
      "type": "string"
    },
}

```

So, both of them will be text fields, can I create one custom renderer and use it for both?

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [July 8, 2022, 3:31pm UTC](https://jsonforms.discourse.group/t/using-mui-input-fields-like-textfield-select-radio-button-to-create-custom-renderers/874/2 "2022-07-08T15:31:29Z")

</div>

Hi @AhsanSaleemMemon,

> Can I create custom renderers using mui input fields like TextField ([Text field React component - Material UI](https://mui.com/material-ui/react-text-field/)), Select, Radio button?

Custom renderers have full control over their rendering output so you can use any Material UI component or even rendering technology you want within any renderer set. Therefore you can definitely use `TextField`, `Select` etc. from Material UI.

> And also, can I use one custom renderer for multiple fields

Yes! Renderers are dispatched to using a tester-based system. Each renderer has an associated tester with the following interface (simplified):

```ts
(uischema: UISchemaElement, schema: JsonSchema) => number;

```

The tester with the highest returned number wins and its associated renderer is used. So you can inspect the `schema` and `uischema` and always return a high number for your custom renderers when appropriate. For this we also offer useful [utils](https://github.com/eclipsesource/jsonforms/blob/6a6af7e7aca7e44c7ba745edb8611f0b7d7acd77/packages/core/src/testers/testers.ts).

For example the following tester will be used for all `type: 'string'` elements, see [`isStringControl`](https://github.com/eclipsesource/jsonforms/blob/6a6af7e7aca7e44c7ba745edb8611f0b7d7acd77/packages/core/src/testers/testers.ts#L341)

```auto
import { isStringControl, rankWith } from '@jsonforms/core';

const myStringTester = rankWith(100, isStringControl);

```

---

<div class="post-metadata">

**Author:** ![AhsanSaleemMemon](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/ahsansaleemmemon/32/384_2.png) [@AhsanSaleemMemon](https://jsonforms.discourse.group/u/AhsanSaleemMemon)\
**Post date:** [July 13, 2022, 10:00am UTC](https://jsonforms.discourse.group/t/using-mui-input-fields-like-textfield-select-radio-button-to-create-custom-renderers/874/3 "2022-07-13T10:00:29Z")

</div>

Can you share a sample code to create a custom renderer using mui TextField?

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [July 13, 2022, 11:13am UTC](https://jsonforms.discourse.group/t/using-mui-input-fields-like-textfield-select-radio-button-to-create-custom-renderers/874/4 "2022-07-13T11:13:24Z")

</div>

Based on [this code](https://github.com/eclipsesource/jsonforms/blob/6a6af7e7aca7e44c7ba745edb8611f0b7d7acd77/packages/material/src/controls/MaterialTextControl.tsx) the following is a basic implementation (untested) using some of the features JSON Forms provides.

```nohighlight
import {
  ControlProps,
  isStringControl,
  RankedTester,
  rankWith
} from '@jsonforms/core';
import { withJsonFormsControlProps } from '@jsonforms/react';

const MyTextFieldControl = (props: ControlProps) => (
  <TextField
    label={props.label}
    value={props.data}
    onChange={(event) => props.handleChange(props.path, event.target.value)}
    error={!!props.errors}
    helperText={props.errors || props.description}
    disabled={!props.enabled} />
);

const myTextFieldControlTester: RankedTester = rankWith(
  2, // higher than the one of JSON Forms Material which uses '1'
  isStringControl
);

// hand this over together with the provided `renderers` to the `JsonForms` component
export const myTextFieldControlEntry = { 
  renderer: withJsonFormsControlProps(MyTextFieldControl),
  tester: myTextFieldControlTester
}

```

Note that this basic implementation does not fully match the standard behavior of our off-the-shelf provided renderers nor uses all of the provided utilities of JSON Forms. Check the implementation of the provided MaterialTextControl as a starting point.