Floating label support

[Athira Susan George]

I would just like to know if the react-phone-number-input component supports floating form labels. My registration form uses a theme for floating labels which must be positioned on top of the input if the input has a value, please refer images and code attached

this is my code that enables floating labels

const activeLabelStyles = {
    transform: 'scale(0.85) translateY(-24px)',
}
export const theme = extendTheme({
    components: {
        Form: {
            variants: {
                floating: {
                    container: {
                        _focusWithin: {
                            label: {
                                ...activeLabelStyles,
                            },
                        },
                        'input:not(:placeholder-shown) + label, .react-phone-number-input + label, .chakra-react-select--has-value + label, .chakra-select__wrapper + label, .react-date-picker + label':
                        {
                            ...activeLabelStyles,
                        },
                        label: {
                            top: 0,
                            left: 0,
                            zIndex: 2,
                            position: 'absolute',
                            backgroundColor: 'white',
                            pointerEvents: 'none',
                            mx: 3,
                            px: 1,
                            my: 2,
                            transformOrigin: 'left top'
                        },

                    },
                },
            },
        },
    },
})

Floating label example

filled field

[Nikolay]

Hi. This component doesn't have any labels but it supports passing a custom input component that could, in turn, support "floating labels" feature. See inputComponent property in the readme.

[Athira Susan George]

Thank you for the quick response. An example would be helpful, if possible

[Nikolay]

@ag288 Currently there're no examples or demos of using a custom inputComponent. The only info is what's in the readme. I guess it requires some level of expertise.

[Athira Susan George]

Isn't this library developed and maintained by you? Or are there any other developers you can put me in touch with, who would be able to give me an idea of how the inputComponent prop is used? My problem is that i have to use two phone number fields in a single form. Thus , without labels it is impossible for the user to know what they are supposed to enter in each field.

[Nikolay]

Isn't this library developed and maintained by you?

What's that supposed to mean? Do you expect me to do your work for you?

[Athira Susan George]

No, that is not what I meant at all. Since you said there are currently no examples and that the only info available is what is in the readme, i was wondering if there was someone else behind this library who knew more about how to use the inputComponent prop. I didnt really understand what was written in the readMe, which is why i asked for an example. Since you created the library, would you be able to just show me how that prop can be used? a very simple example would suffice. Thank you, and my apologies if I sounded rude, that was not my intention at all. :)

[Nikolay]

@ag288

No, that is not what I meant at all.

Oh, ok. We're cool then :)

Since you said there are currently no examples and that the only info available is what is in the readme, i was wondering if there was someone else behind this library who knew more about how to use the inputComponent prop.

No one else, it's just me.
Speaking of more docs on the inputComponent prop, I'd explain my position as: if a person is qualified enough to understand how it works from the existing info in the readme, they could implement it themselves. In other case, they'd have to educate themselves first until they're able to understand how to do that because the task of customizing the input itself would be disproportionately complex for them to handle. I prefer people being educated evenly rather than knowing some things and skipping other things. At least that's the way I do it in my life. Other people may have other preferences, of course, and there're many people who'd prefer having a quick pill for their particular case and then move on, whereas I myself prefer to study the basics first and then handle the more advanced stuff.

Since you created the library, would you be able to just show me how that prop can be used?

Being an open-source developer, I've developed a habit of not solving other people's issues and instead telling them to handle their own stuff themselves.
After all, I have my own life to live.
So it's a rule for me, which I follow.

Speaking of this particular case, consider passing inputComponent property being the Input Component from the UI library you're using, and then see what errors appear. Then post the errors and maybe I could hint on what's the issue.
I won't look at any code though.

[Athira Susan George]

I'd explain my position as: if a person is qualified enough to understand how it works from the existing info in the readme, they could implement it themselves. In other case, they'd have to educate themselves first until they're able to understand how to do that because the task of customizing the input itself would be disproportionately complex for them to handle.

I totally understand and agree with that thought process. Thank you for the time and help, I'll see if anything works for me.