Label filledInput displayed outside of the input field

I'm currently working with <FilledInput/> using Material UI in conjunction with <InputLabel/>. However, I've encountered an issue where the label is not centered vertically and seems to move "out of bounds" when focused (appearing like the outlined version). Although I could opt for the "filled" variant of the standard <TextField/>, I find that <FilledInput/> offers a cleaner styling option tailored to my preferences. Does anyone have insights on why this misalignment of the label occurs?

For reference, the following Codesandbox illustrates the differing behavior compared to the usual "filled" variant TextField: https://codesandbox.io/s/filled-field-example-4hqqkw?file=/demo.tsx

reactjsmaterial-ui

Answer №1

If you're experiencing label alignment issues, it could be due to not wrapping the FilledInput component inside a FormControl component. The Material UI documentation specifies that the FilledInput component should always be nested within a FormControl to provide necessary context for form inputs such as filled/focused/error/required states.

Here's an example of the correct usage:

<FormControl size="small" fullWidth variant="filled">
...
</FormControl>

This is the expected outcome.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The render() method in a class does not support Jquery functionality, unlike the componentDidMount() method where it works effectively

After updating my packages to the latest versions, I encountered an error in my project. Previously, everything was working fine, but after upgrading Next.js to version 9 and jQuery to version 3.5, the $.map function stopped working as expected. When I tri ...

jqueryreactjsreduxnext.js

Pressing the submit button in the Material UI table clears all selected checkboxes

Take a look at this code snippet: https://jsfiddle.net/aewhatley/Lkuaeqdr/1/. My objective is to construct a table with a submit button utilizing Material-UI components. const { Table, TableHeader, TableHeaderColumn, TableBody, TableRow, Table ...

javascriptreactjsmaterial-ui

Tips for customizing the appearance of a label when a MUI Radio Button is selected

Hello everyone, I am attempting to customize the label text color of a radio button to turn blue when selected. https://i.stack.imgur.com/btSc2.jpg HERE IS THE CODE FOR MY MUI BUTTON SO FAR import * as React from "react"; import Radio from &quo ...

javascriptcssreactjstypescriptmaterial-ui

How can we include additional types for external npm packages in a React TypeScript project?

Recently, I encountered an issue while using the react-microsoft-login package from npm. I included a button in the children property and received a typescript error stating that "property 'children' does not exist on type 'intrinsicattribut ...

reactjstypescriptgitnpmnode-modules

React components are graced with a clear icon that is visible on every element

I'm attempting to show a remove icon on a grid display when the user hovers over it with their mouse. this.state = { action: [], } <div> {this.state.action.map((value, index) => { return ( <div key={index} onMouseEnte ...

javascriptreactjsmaterial-ui

How can the required flag be integrated with rules validation in react-hook-form and material-ui (mui) for inputs?

Currently, I have implemented react-hook-forms for handling form functionality and validation in our application. On the other hand, we are utilizing MUI/Material-UI as our component library. One issue that arises is that MUI automatically adds a * to inpu ...

javascriptreactjsvalidationmaterial-uireact-hook-form

Styling Higher Order Components with 'withStyles()' in material-ui

Here is my Higher Order Component (HOC) code: const withPaper = Component => props => ( <Paper> <Component {...props} /> </Paper> ); export default withPaper; I am looking to style the 'Paper' component using wi ...

material-uijss

Tips for resolving the ownerState.color error in MUI V5 using TypeScript

Looking for help in changing the hover colors of buttons from dark to light. I attempted using ownerState on all buttons, but encountered difficulties with the type of ownerState. ...

reactjsmaterial-ui

Should the JSON data in an ASP.NET React application be serialized and normalized on the client-side or server-side?

Currently, I am in the process of developing a asp.net react application. Up until now, I have successfully completed the serialization and normalization of nested data on the client-side using normalizr. However, I am considering whether it would be more ...

asp.netreactjsasp.net-web-apiasp.net-corejson.net

Differences Between DOM and Refs in React

When it comes to React, what distinguishes the use of DOM from Refs? While it is possible to utilize typical JavaScript DOM node selectors in React for targeting specific elements, refs also offer a way to achieve the same functionality. What are the adv ...

javascriptreactjsdomreact-dom

What is the best way to fetch the title property from my Campaign Contract for displaying it in the render method?

I'm currently working on a unique crowdfunding DApp that requires constant access to contract variables through function calls for retrieval purposes. The getDeployedCampaigns function is responsible for returning an array of deployed campaign addres ...

javascriptreactjsnext.jssolidityweb3-react

Incorporate font assets from the bundled ReactJS library in the npm package for Rollup

I am currently in the process of bundling a reactjs library using rollup to generate an npm package containing all my UI components. However, I have encountered an issue with the font icons. Whenever I attempt to utilize an icon from another react app, I e ...

reactjsnpmfontsrollup

Icon from Material-UI embedded within internationalized text

Has anyone successfully integrated Material UI icons into i18n translated text? I've added the library and imported it to my parent file. I also included this line in my language JSON file, but unfortunately, it's not working as expected: { &quo ...

reactjsmaterial-uii18next

Encoding URLs for LoopBack applications

I am experiencing an issue with the filter I have: { "fields": {"goal":true,"amountPledged": true,"title": true},"where": {"title": {"like":`%${this.state.searchText}%`}} } The this.state.searchText value is bio. According to my understanding, it should ...

javascriptreactjsloopbackjsaxios

Utilize fetch API in React to streamline API responses by filtering out specific fields

I have received an API response with various fields, but I only need to extract the description and placeLocation. results: [{placeId: "BHLLC", placeLocation: "BUFR", locationType: "BUFR",…},…] 0: {placeId: "BHLL ...

javascriptreactjsjson

Issues with React Native imports not functioning properly following recent upgrade

Hey there, I’ve been tasked with updating an old React-Native iOS project from version 0.25.1 to 0.48.0. However, I’m encountering several compiler issues and struggling to navigate through the code updates. The project includes an index.ios.js file s ...

javascriptiosreactjsreact-nativereact-native-ios

Utilizing JavaScript variables imported from an external library in Next.js: A Guide

I am currently working on a Next.js with Typescript website and I am in the process of adding advertisements. The ad provider has given me instructions to embed this JavaScript code on my site: <script src="//m.servedby-buysellads.com/monetization. ...

javascriptreactjstypescriptnext.js

Having difficulty displaying JSON data in a react component

I am currently working on parsing JSON data retrieved from an Ajax call in order to display it in a table using the React DataTable component. However, I have encountered a problem while trying to store the data in a state variable using the setState metho ...

javascriptjsonajaxreactjsreact-router

Can we rely on the render method to display the updated state immediately after invoking setState within

Is it guaranteed that the state will exist in the render method if I call setState within componentWillMount without using a callback? According to Facebook, "componentWillMount is called before render(), therefore calling setState() synchronously in this ...

javascriptreactjs

Cross-Origin Resource Sharing problem impacting a Next.js web application

I've encountered a CORS issue while trying to deploy my Next.js application with Dokku, after previously deploying it without error on Vercel. The problem arises when the Next.js server communicates with a Python Django API through an API gateway. In ...

reactjsnext.jscors