CODEWITHSUNDEEP
cssreactjsmaterial-uifrontendlabel
nazifa rashid
nazifa rashid

Reputation: 1519

material-ui-chip-input with floating input label

I have installed material-ui-chip-input for using tags on one of my input fields. I wanted a label with it so I have used material ui default label which they use for other inputs. But The input needs to be shrink when user click on that.

I am attaching my code below and the screenshot of the design. Please feel free to help. Thanks in advance!

enter image description here

<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>

Upvotes: 1

Views: 2317

Answers (1)

gikall
gikall

Reputation: 607

Remove your custom label and add in ChipInput the property label="Title" and you will have the result you want.

For the second label I have added in property helperText.I have added a className to the component, and then I will make some customizations with CSS.

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

In CSS you can add the below

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

You can check my snippet here

For more information about the component properties you can take a look here

enter image description here

Upvotes: 1

Related Questions