Placeholder text in TextInput

Is there a way to show placeholder text in TextInputs? Didn’t find anything in the documentation.

<TextInput Text="PlaceHolder" />

Let’s you pre-initialize the string, but perhaps you want to have a string that is removed once the TextInput becomes active instead?

Yes. I would like a greyed out placeholder text that disappears when the user starts typing

I’ve created an internal ticket to add such a feature. We’ll let you know what happens with this. Thanks for the feedback :slight_smile:


What about the placeholder text in TextInputs?

You can try this one :slight_smile:

    <WhileFalse ux:Name="showLabel">
        <Text Value="Your Placeholder" Alignment="Center"/>
    <TextInput Value="">
            <Change showLabel.Value="true"/>

This puts a Text element on top of the TextInput while it’s empty.

Thank you Kristian :slight_smile:

Yeah thanks for the work-around Kristian! Is this still going to be a feature added to TextInput though? I for one would really like to see something like

<TextInput Value="" Placeholder="Enter Name" />


<TextInput Value="" Hint="Enter Name" />

Yes, this feature will be added to TextInput soon. I don’t have an exact ETA right now, but it’s certainly coming :slight_smile:

This has been implemented, scheduled for release early next week.

Was this ever released? I don’t see it in the documentation, so I’m not sure how to actually use it.

Yes. Should work with PlaceholderText

Hrm - not doing the job for me. Might need to play with it a bit to figure it out.

What is not doing the job? Why is it not working? This shows a Placeholder for me:

<App Theme="Basic">
        <TextInput PlaceholderText="Hello" />

Ah, I was using this to prevent styling problems, which prevented that from appearing too:


I’ll need to find another way now, I think.

Thanks for your help!

Or copy the style. Here is the style that Fuse is using:

Taking that approach results in this error:

Data type not found: WhileContainsText

There’s no way for me to allow inheritance and prevent the default background layer from appearing (at least, not that I can tell), and it looks like that’s the problem.

I could just do without the hint-text, but this does point to an inheritance problem in general tbh, as opposed to it just being a simple case of copy/pasting a heap of code.

I have more digging to do and am still very new to this framework, however, so I’m definitely going to keep moving on this. I just hope there’s an elegant way to get this done without copying 30 lines of code that won’t be maintained when the framework is upgraded in the future :slight_smile:

Create a new object inheriting from TextEdit and style that. Please post your code that gives the error.

Hrmm - how do I do that and prevent the pre-defined background panel from displaying entirely?

        <Panel Layer="Background">
            <Rectangle Alignment="Bottom" Height="1" Margin="0,8,0,8" ux:Name="_dividerRect">
                <SolidColor ux:Name="_textInputDivider" Color="{Resource CLine}" />

Are you talking about the background on <TextInput />? You can use <TextEdit /> if you need a plain textinput without any styling :slight_smile: