Floating Label TextField for Xojo Web 2.0 (WebSDK)

Extras
1

Hi everyone,

I’ve just released a custom WebSDKUIControl for Xojo Web 2.0, bringing native Bootstrap Floating Labels to your Xojo Web projects.

:input_latin_letters: What it is

A modern replacement for WebTextField, with floating labels just like you see in Bootstrap-based UIs. The control is built using the official WebSDK, so it’s fully integrated with Xojo’s event system and layout editor.

:last_quarter_moon: Features

  • Full support for light and dark mode (uses Bootstrap’s standard color schemes)

  • Clean drawing in the Xojo layout editor (DrawControlInLayoutEditor)

  • Inspector support for:

    • LabelText (shown as the floating label)

    • Value (current text content)

    • Enabled state

  • Triggers TextChanged and EnterPressed events

  • Responsive design with Bootstrap 5 styling

  • Open Source on GitHub!

:package: GitHub Repository

You can find the full source here:

:link: GitHub - FAESCH/Xojo-Floating-Labels: Bootstrap Floating Labels display the label inside the input control. This is a WebSDKUIControl to for use in Xojo

FloatingLabelTextField

16 Likes
2

That’s awesome! Thank you for sharing the control.

1 Like
3

I don’t use Xojo Web, but this looks wonderful. Thank you for making it available to the public.

1 Like
4

Indeed, thank you very much!

1 Like
5

Today I added TextArea to the repository:

FloatingLabelTextArea

4 Likes
6

Thank you for this.
Do you plan adding Focus events?

7

I will look into that next week

2 Likes
8

I added FocusReceived and FocusLost events to both, TextField and TextArea

2 Likes
9

Very nice! Thanks a lot!

1 Like
10

I recently added FieldType to FloatingTextField, so you can use

  • Password
  • Email
  • Number
  • Telephone
  • URL

where supported.

3 Likes