CODEWITHSUNDEEP
autocompletematerial-uitextfieldboxfloating-labels
Raisa A
Raisa A

Reputation: 486

Is there a way to keep the floating label highlighted while text is being input in the same box

I am currently working on a phone number field using Material UI Components.

The field structure is as follows

<Box>
   <Autocomplete />
   <TextField />
</Box>

The Autocomplete field (used for country code) has a floating label which reads 'Mobile Number'.

When the country code is selected, it is highlighted, however, when the mobile number is to be entered in TextField, it is not highlighted anymore.

Is there a way that the floating label can stay highlighted as long as any component within the box is selected?

Upvotes: 0

Views: 811

Answers (1)

Raisa A
Raisa A

Reputation: 486

The TextField in Autocomplete takes input props, one of which is InputLabelProps. This controls the highlight and shrink of the label.

InputLabelProps has 2 attributes which control the focus and shrink of the label

InputLabelProps: {
 focused: true/false,
 shrink: true/false,
}

The value of both attributes is boolean and decides whether the label should be focus or shrink.

The values of these attributes can be controlled using hooks.

const [focus, setFocus] = useState(false);

This is an example of how it works for Autocomplete. You can set the value of focus based on certain events.

Upvotes: 0

Related Questions