Placeholder text in TextInput

Feature Suggestions
1

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

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

3

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

4

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:

5

Hi

What about the placeholder text in TextInputs?

6

You can try this one :slight_smile:

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

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

7

Thank you Kristian :slight_smile:

8

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

or

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

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:

10

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

11

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

12

Yes. Should work with PlaceholderText

13

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

14

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

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

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

ux:InheritStyle="false"

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

Thanks for your help!

16

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

https://gist.github.com/kusma/f6094c3d55127c07fec2

17

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:

18

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

19

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}" />
            </Rectangle>
        </Panel>
20

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