[material-ui][Text Field] Size & Customization

[ceyxasm]

Summary

I have inputs using which I am filtering content and rendering in a TextField component. The content is however a little big and creates a big TextBox which breaks the layout.

1. Can I set the size of the textbox so that its fixed and the content can be browsed by scrolling?
2. Can I render all the text and highlight the selected text instead of just showing the filtered text?

Examples

I want to create an interface similar to this:

Motivation

• Avoids breaking the site layout because of unpredictable inputs.
• Avoids rerendering the entire text at each new input.

Search keywords: text field, size, customization, rerender

[DiegoAndai]

Hey @ceyxasm, thanks for the question.

You can use the rows prop to set a specific number of rows to the text field or use maxRows to limit it: https://mui.com/material-ui/react-text-field/#multiline. Let me know if this covers your use case.

About highlighting, we don't have that functionality implemented.