B4A Library [B4X][B4A] B4XDaisySelect - Absolutely Stunning!

Hello Fam!

Are you looking to easily modernize the user interfaces of your cross-platform projects? Allow me to introduce B4XDaisySelect!
Engineered as a standalone native view layer, B4XDaisySelect brings the highly sought-after, beautiful aesthetics of DaisyUI directly to your B4A, B4i, and B4J applications. It completely manages its own visual layer, meaning you get smooth, responsive trigger panels, chevron icons, and dropdown overlays without relying on extra dependencies.

Key Features:

• Rich Color Variants: Switch effortlessly between none, ghost, neutral, primary, secondary, accent, info, success, warning, and error.
• Responsive Sizing: Fully supports md, lg, and xl sizes to automatically scale font sizes and paddings.
• Built-in Labels & Hints: Cleanly display a LabelAbove and HintText natively integrated into the component's layout.
• Smart Data Binding: Separate the user-facing text from the computer-facing value using AddItem(Value, Text) (perfect for database IDs!).
• Theme & Radius Support: Apply corner tokens from rounded-none all the way to rounded-full.

Quick Start Example (Beginner Friendly!) Here is a super simple, step-by-step way to initialize the component, style it, and capture user selections in code:

Sub Globals
    Private pnlHost As B4XView ' The layout panel where the select will be hosted
    Private mySelect As B4XDaisySelect
End Sub

Sub Activity_Create(FirstTime As Boolean)
    ' 1. Initialize the component (Pass the Callback module and Event Prefix)
    mySelect.Initialize(Me, "mySelect")
   
    ' 2. Add it dynamically to your parent view
    ' Parameters: Parent View, Left, Top, Width, Height
    mySelect.AddToParent(pnlHost, 20dip, 50dip, 300dip, 50dip)
   
    ' 3. Apply DaisyUI-inspired styling
    mySelect.Variant = "primary"   ' Try "secondary", "success", "ghost", etc.
    mySelect.Size = "lg"           ' Scales height and text size (md, lg, xl)
    mySelect.Radius = "rounded-lg" ' Set smooth corners
    mySelect.LabelAbove = "Favorite Platform" ' Displays a title above the select
    mySelect.HintText = "Select your preferred B4X tool." ' Helper text below
    mySelect.Placeholder = "Choose an option..." ' Text shown when nothing is selected
   
    ' 4. Add items using Value / Text pairs.
    ' "Value" is what your code reads (e.g. database key), "Text" is what the user sees.
    mySelect.AddItem("b4a", "B4A (Android)")
    mySelect.AddItem("b4i", "B4i (iOS)")
    mySelect.AddItem("b4j", "B4J (Desktop)")
End Sub

' 5. Trap the selection event!
' This triggers whenever the user picks an option from the dropdown overlay.
Private Sub mySelect_SelectedChanged(Index As Int, Value As String)
    Log("User clicked item at index: " & Index)
    Log("The underlying value selected is: " & Value)
   
    ' Example: If the user picks "B4A (Android)", Value will be "b4a"
    #If B4A
        ToastMessageShow("You selected: " & Value, False)
    #End If
End Sub

Stop settling for standard OS default spinners and jump in to give your UI the beautiful upgrade it deserves! Let me know if you have any questions, feature requests, or bugs below!

#SharingTheGoodness

 

[Mashiane]

Update:

Added ActiveColor (to highlight selected item in dropdown) & Required red star.

 

[fabricio]

Hi,

Small usability issue with B4XDaisySelect on long lists, reproducible with the kit's own demo (select page, "Scrolling (50 items)" section, screenshot
attached).

Steps

1. Open the "Long List" select and pick an option far down the list, e.g. "Item 29". The trigger shows "Item 29" correctly.
2. Tap the same select again.

What happens

The dropdown opens scrolled to the top ("Item 1" is the first visible row). The selected option is nowhere in view, so the user has to scroll down and
find it again every time the select is reopened.

What I expected

The dropdown to open with the selected option in view (ideally centred among the visible rows, so a few options above and below it are visible), which is
what every native picker does.

With short lists this is not noticeable, but in our app some selects have 50 to 100 entries and the user typically reopens
them to double-check or change the choice, so it turns into a real annoyance in the field.

Setup: B4A 13.70, B4XDaisyUIKit 0.94, B4XPages, Samsung, Android 14, portrait.

Thanks!

 

[Mashiane]

Hi,

Small usability issue with B4XDaisySelect on long lists, reproducible with the kit's own demo (select page, "Scrolling (50 items)" section, screenshot
attached).

Steps

1. Open the "Long List" select and pick an option far down the list, e.g. "Item 29". The trigger shows "Item 29" correctly.
2. Tap the same select again.

What happens

The dropdown opens scrolled to the top ("Item 1" is the first visible row). The selected option is nowhere in view, so the user has to scroll down and
find it again every time the select is reopened.

What I expected

The dropdown to open with the selected option in view (ideally centred among the visible rows, so a few options above and below it are visible), which is
what every native picker does.

With short lists this is not noticeable, but in our app some selects have 50 to 100 entries and the user typically reopens
them to double-check or change the choice, so it turns into a real annoyance in the field.

Setup: B4A 13.70, B4XDaisyUIKit 0.94, B4XPages, Samsung, Android 14, portrait.

Thanks!
View attachment 173567

Thank you so much for this bug report. Will be fixed in the next release.

 

[MrKim]

Well I just spent 10 minutes staring at this page and I don't see a link to get the lib?!

 

[William Lancee]

This library is part of the B4XDaisyUIKit

https://www.b4x.com/android/forum/t...pired-by-daisyui-tailwind.170352/post-1047869