New feature: Material UI Chip Input with floating input label

I installed material-ui-chip-input to implement tags in an input field. I wanted a label alongside it, so I utilized the default Material UI label for consistency with other inputs. However, the input doesn't shrink as expected when clicked on by the user.

Below is my code snippet and a screenshot of the design. Any assistance would be greatly appreciated. Thank you in advance!

https://i.stack.imgur.com/LGzjY.png

<div className={`${styles.input_range} form_design`}>
    <label className={styles.character_limit}>(13/30)</label>
    <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated" data-shrink="false" for="standard-basic" id="standard-basic-label">Title</label>
    <ChipInput
    defaultValue={['Science', 'Arts']}
    // onChange={(chips) => handleChange(chips)}
    />
</div>

Answer №1

Make sure to replace your custom label with the ChipInput property label="Title" for the desired outcome.

Additionally, I have included a helperText property for the second label. By assigning a className, you can further customize the component using CSS.

<div className={`${styles.input_range} form_design`}>
    <ChipInput
    className="customChipInput"
    label="Title"
    helperText="(13/30)"
    defaultValue={['Science', 'Arts']}
    // onChange={(chips) => handleChange(chips)}
    />
</div>

You can enhance the appearance by adding the following CSS:

.customChipInput p {
  width: fit-content;
  position: absolute;
  bottom: 30px;
  right: 0;
}

Feel free to view the code snippet here

To explore more about the component properties, visit the link here

https://i.stack.imgur.com/2NN2p.png

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

aligning adaptable grid on the screen

Is anybody able to assist me in vertically centering the responsive matrix below so that it is equidistant from the left and right edges of the screen (parent element has a width of 100%)? Any help would be greatly appreciated. Here is my code: <!DOC ...

Design and styling with HTML5 and CSS

Having a small issue with my code as I venture back into coding after a long hiatus, resulting in me forgetting some basics. Currently, I am attempting to create a simple HTML layout. Upon inspecting the page, I noticed that it appears slightly longer tha ...

Tips for placing images on top of each other without overlapping other sections using 'position: absolute' in HTML and CSS

Is there a way to position one image on top of another in a responsive manner? I tried using position: absolute and z-index, but the result is not responsive. When the screen size changes, the image ends up on top or behind another section instead of expan ...

What is the best way to trigger a download of an external image (AWS signed URL) when a button is clicked?

Currently, I am facing a challenge attempting to download an image from an s3 Presigned URL upon clicking a button in Nextjs (client-side). To provide some context: On the backend, I'm utilizing Golang and on the front end, it's the Nextjs Reac ...

Detecting the preferential usage of -webkit-calc instead of calc through JavaScript feature detection

While it's commonly advised to use feature detection over browser detection in JavaScript, sometimes specific scenarios call for the latter. An example of this can be seen with jQuery 1.9's removal of $.browser. Despite the general recommendatio ...

Using data variables as arguments in the style section of Vue2

Suppose we have a data variable and I want to utilize this data variable for styling purposes. data() { return{ selected:{ index: 2 } } } <style> .parent-table >>> .table-row:nth-child(/* here I intend to use ...

What is the best way to create a variable in a React component that requires asynchronously loaded data in order to be functional?

While I have a good understanding of passing data from one component to another using this.props, I am encountering difficulty in asynchronously fetching and storing values, such as from a database, that need to be accessed throughout the component. The ch ...

instructions for creating a hover effect where one div vanishes when hovering over another div

Is there a way to make the line visible when hovering over my circular div? #line { display: none } <div id='circle'> <div id= 'line'> ...

Unable to transfer an array from getStaticProps method in Next.js

Whenever I pass a JSON array from getStaticProps in Next.js, I encounter this specific error message when trying to access it. TypeError: Cannot read property 'contentBody' of undefined module.exports../pages/[author]/[article].js.__webpack_expo ...

Eliminating border styles alters the overall appearance of the page

I'm encountering an issue with my HTML/CSS code here: CSS * { padding: 0; margin: 0; border: none; outline: none; } #container { margin: 10px auto 10px auto; width: 960px; background-color: #dddddd; border: solid 1px black; } #contai ...

Tips for initializing state values in React component constructor once the meteor subscription has finished

I'm facing a scenario in my application where I am using React and Meteor. I want to initialize state values with records from collections, but the meteor subscription takes some time to return these records. As a result, there is a delay in getting s ...

Why does my React.js application still display outdated data from my Express server even after refreshing the webpage?

I have been working on a website using React.js and Express.js, following an online example to set up the basic code. I encountered an issue where the frontend did not update when I made a minor change to the array sent by Express.js. Express - users.js f ...

encountering the 'UnsupportedAuthorityValidation' issue when working with the react-azure-adb2c package in a React application

I am currently using the following code to authenticate and obtain an access token with Azure ADB2C. I am utilizing the 'react-azure-adb2c' MSAL library for this purpose. I have also attempted using the value of () instance. import b2cauth from ...

The content div in CSS is causing the menu div to be displaced

I have encountered a difficulty in describing the issue at hand as I am still in the learning phase and consider myself a beginner. Within my container div, there are two other divs - one for the menu and another for the content. Both of these divs float ...

Guide on incorporating a refresh button to automatically update information from a database in MaterialUI's Datagrid

Recently diving into JavaScript, I encountered a common issue: The data for my table is sourced from a MySQL database through Axios Whenever CRUD operations are performed in the web app, the database is updated accordingly Although backend changes ...

ran into the error that this state is not a function

Every time I run my code, I encounter the error message this.setState is not a function. Can anyone offer guidance on how to fix this issue? Thank you! spiele.listUsers(params, function(err, data) { if (err) console.log(err, err.stack); else con ...

Make sure to highlight the "antd" menu item whenever the route is updated through redux-saga

Currently utilizing the "antd" framework for a react application, I am facing a minor issue with menu highlighting. Specifically, I am encountering problems with highlighting the currently selected menu item. I have come across a solution that works seaml ...

printing not displaying colors

Is there a way to maintain the colors while printing my HTML page to PDF? <table class="table table-responsive table-striped"> <thead> <tr> <th>Elev</th> <th>Session n ...

Content that is partially concealed when scrolling through div elements

I have been searching high and low for similar questions, but to no avail. So, I am laying out my problem here in the hopes that you could guide me on what I might be doing wrong and how to rectify it. The scenario I am trying to achieve is having two divs ...

My website gets all wonky when I try to resize the browser

Here is a visualization of my website's ideal appearance: However, the actual display varies on different computers. After testing with browsershots.org, I noticed that my website looks messy on most browsers and even when resizing the browser window ...