Questions tagged [textfield]
A text field, also known as a text box, is an interface element that enables users to enter text into a software application.
I am trying to customize the mouse cursor behavior of a TextField component from Material UI when its variant is set to "outlined". Currently, the cursor changes to Text but I want it to appear as a pointer instead. I attempted to override the default beha ...
Starting an electron app using https://github.com/electron-react-boilerplate/electron-react-boilerplate Utilizing child_process from node like : function func() { spawn('powershell.exe', ["ls"], (error, stdout, stderr) => { if (error) { ...
Recently, I encountered an issue while trying to implement a stylized input field from @material-ui. The code snippet I used was: <TextField id="outlined-basic" className={classes.inputField} color="primary" label="Messa ...
Currently, I am utilizing the material ui text field component. The issue at hand is that when the text field is in focus, the placeholder shifts to the top of the field. https://i.stack.imgur.com/P5flf.png I prefer for the placeholder to remain within ...
For the first 10% of the text field, one background color is used, while for the remaining 90%, another background color is applied. <TextField className={classes.root} type="text" placeholder="username" var ...
I am trying to align the Typography and TextField of Material UI vertically. Below is my code snippet: <Grid container> <Grid item xs={12} sm={3}> <Typography>1.1 Company Name</Typography> </Grid> <Grid ...
Trying to customize the input value of this MUI component, aiming to display a maximum of 3 numbers followed by up to 2 decimals separated by a dot, such as 233.99. The intention is to save this formatted value in a react state called 'value' (const [value ...
Hello, I am currently delving into Material UI (ver.5.10.10) for the first time. My goal is to customize the styling of the TextField component in Material UI. Specifically, I want the TextField to always display its focused style, regardless of whether it ...
How can I create a textfield using React MUI Textfield without the inner box margin showing up when adding the multiline prop? I've experimented with various CSS and styling options, but none seem to be working properly. ...
I'm currently using the '@material-ui/core: ^4.12.3' package and I'm working with the Textfield component. I have one text field: https://i.stack.imgur.com/uktLw.png After editing, the background color of the text field changes from ...
I am currently working on a project that involves creating an admin site using Firebase. One of the main features of the site is large text fields that display information which can be modified. For instance, the user management page includes text fields ...
Currently, I am working on a project using React Material UI along with TypeScript. In one part of the application, there is a Material UI Table that includes a column of Material TextFields in each row. The goal is to highlight the entire table cell when ...
Recently, I've started learning React and have been utilizing Material UI components. My current project involves creating a simple SearchBar with a search icon. Everything seems to be working well so far, except that the clear icon is not being displ ...
Looking for guidance on how to enable users to edit the image URL and text within a Material UI Card without altering its size or the size of any children components. Is there a recommended approach or example available for reference? ...
Utilizing Material-UI's TextField alongside react-hook-form to monitor inputs has raised an issue for me. I have observed that regardless of the input type, it always returns a string. This creates conflicts with the data types I am using in my codeba ...
Is there a way to create a clickable textField that opens a dialog box for users to input more text? I'm specifically looking for a solution using MaterialUI. Currently, I have a workaround where a button is displayed to open the dialog box instead of mak ...
My application depends on the 'city' value to make an API call and fetch data. To achieve this, I have set up a form that utilizes a setState value for my city and a useEffect value in my main App.js file so that each time a new city is submitted ...
Currently, I am utilizing Material UI in my project and this is the textField I am working with: text field reality As shown, there is a bottom border underline present. However, I am aiming to completely remove it. In the past, I would simply use `border ...
My website has multiple sections spread across different pages, each section using a material-ui textfield controlled from a central page. The challenge is setting specific maxLength limits for each field. I came across the inputProps={{maxLength: 10}} so ...
My challenge involves working with an array object that receives input from a textfield. I am looking to create a clean design where only one textfield is initially displayed, along with a '+' button next to it. When the user enters information into the te ...
In the card below, I have implemented a simple edit functionality. Upon clicking edit, a textfield is supposed to appear for me to make changes and save them. However, I am facing issues with the required and defaultValue attributes in my Textfield, alth ...
Recently, I integrated material-ui into my react project and encountered a challenge. My goal is to copy a number and paste it into multiple text fields. const [otpArr, setOtpArr] = useState<string[]>(['', '', '', '', '', '']) let inputRefs = useRef( ...
I am currently working on a react application and utilizing the material ui TextField component. I am in need of guidance on how to implement error and helper text validation for the email and password fields in the code snippet provided below. Your assi ...
For my current project, I am utilizing Material UI and React. Each TextField in the project has a button next to it, and when the button is clicked, I want it to retrieve the value of its corresponding TextField and set that value as the input for another ...
My Textfield has a bug, how can I ensure that my Maps label is in the center of the dropdown every time and not elevated at the top left corner? Thank you! Check out this screenshot for reference <TextField select ...
In the disabled TextField, I want the text color to be black instead of the default gray. I attempted the following after finding inspiration from this source: <TextField id="outlined-basic" value={'https://git.responsive.software/my-app.git' ...
Hello, I trust you are well! I hate to bother you, but after searching for hours, I have yet to find a solution to my dilemma. I am currently grappling with the challenge of displaying long strings inside multiple cards using tooltips. Picture this scenar ...
<TextField // autoFocus margin="dense" // id="name" select label="Majorhead ID" type="text" fullWidth onChange={(event) => { this.setState({majorhead: event.target.value} ...
In my React application, I am incorporating Material-UI. My goal is to modify the default label "Please fill out this field" of a text-field when setting the required attribute. I attempted to utilize setCustomValidity with inputProps, but unfortunately, ...
Currently, I am developing a phone number input field using Material UI Components. The structure of the field is as follows: <Box> <Autocomplete /> <TextField /> </Box> The Autocomplete component (used for country code) has ...
I am looking to dynamically update the value displayed in my Revenue textfield by subtracting the Cost of Goods from the Sales Price. I have included an image of the current layout for reference, but I want the Revenue field to reflect the updated value af ...
Struggling with managing user input in the code snippet provided. I can't seem to restrict the number of digits a user can enter into a text field while also controlling the type of input. If I remove type: "number", then I am able to contr ...
I need help adjusting the padding to align the icon to the right side in an AutoComplete Material UI component. The current styling is being overridden by this specific style: .MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon .MuiAutocomplete-inp ...
Currently, I am attempting to emulate the TextField example from material-ui. The intended outcome is shown below: This is the expected result However, this is what I actually obtained: [The red marks indicate an additional line that all TextFields have ...
I am currently working with a react-hook-form that includes several fields. One of the fields is a <TextFields /> element from mui/material (Link). This specific field is set to type "number" and I am looking to remove the arrows commonly associated ...
My TextField Select Material UI components are populated based on a specific number of values stored in a variable. {this.state.selectedNextHops.map((nextHop, index) => ( <div> <TextField selec ...
I'm trying to add a dimensions box to my form. I created 3 MUI textfields within a formGroup, set the border radius to 0, and adjusted the color properties but it still didn't work. This is what I'm aiming for My goal is to have 3 input fie ...
My goal was to incorporate both a predefined list of options for radio buttons and an option for users to write in their own answer using Material UI components. After dedicating several hours to successfully link the TextField to the RadioGroup, I hope th ...
Encountering an issue in Material ui core version 3.9.2 When using inputRef={input => { this.input = input; }} An error is displayed: TypeError: Cannot set property 'input' of undefined If we replace this.input with ...
So I've been working on a project that involves having potentially unlimited input fields. However, once I add around 200 items, the performance starts to degrade significantly. You can see a demo of this issue here: (To test: Focus on the last input fiel ...
Looking to customize the underline border color of TextFields marked as mandatory within a form using react-hooks-form. I understand that I need to define a style for these fields, but I'm struggling with where to start... This is the current code s ...
class AddTaskScreen extends StatelessWidget { const AddTaskScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { String newTask = ''; return Container( color: const Color.fromARGB(255, 117, 117, 117), ...
I've been struggling to figure out how to customize the color of the TextField border. I want to change it from the default grey to black. Below is a simplified version of my UpdatePage.js file: const useStyles = makeStyles(() => ({ updatePage: { ...
Currently, I am facing an issue with two fields on my form. The first field is an autocomplete feature while the second field is a textfield. By default, my second field is disabled but I need it to become enabled every time a user types and selects an opt ...
This issue arises when using an updated form textField. Initially, data is fetched using the toDo id. const [toDo, setTodo] = useState<any>({}); useEffect(() => { axiosConfig .get(`/todo/${todoId}`) .then((response) => { setTodo(respons ...
Currently, I am trying to implement react-number-format (NumberFormat) for formatting numeric values in a material ui TextField. Strangely enough, while I can input new numbers without any issues, I've encountered a problem where I cannot delete or mo ...
Currently using Material-UI version 4.5.2, I am attempting to add an end adornment and adjust the right padding so that the icon appears in the rightmost position. Despite my efforts to override it using the classes property, I have not been successful. He ...
It's perplexing why I keep encountering this issue - it has popped up a few times when attempting to utilize nested objects with Formik, React, and TypeScript. It appears that Formik is not compatible with data containing nested objects? https://i.st ...
Here we go again, another question related to React! UserInfoStep.js (Child) function UserInfoStep({ PUID, FirstName, handleChangeParent }) { const { dispatch } = useContext(ContactFormContext); return ( //some controls <F ...