Skip to main content

​
Components

Fluent Plus offers a wide range of interactive elements.

​
Button

Simple clickable element. 
Tab:AddButton({
    Title = "Button",
    Description = "Description text",
    Icon = "settings", -- Lucide icon
    Callback = function()
        print("Clicked")
    end
})

​
Toggle

Switch between true/false states. 
local Toggle = Tab:AddToggle("ToggleId", {
    Title = "Feature",
    Description = "Enable something",
    Default = false,
    Icon = "toggle-right",
    Callback = function(Value)
        print("State:", Value)
    end
})

Toggle:OnChanged(function() print("Toggled") end)
Toggle:SetValue(true)

​
Slider

Select a value from a range. 
local Slider = Tab:AddSlider("SliderId", {
    Title = "Speed",
    Description = "Adjust speed",
    Default = 16,
    Min = 16,
    Max = 100,
    Rounding = 1,
    Icon = "activity",
    Callback = function(Value)
        print("Speed set to:", Value)
    end
})

Slider:OnChanged(function(Value) print("Changed:", Value) end)
Slider:SetValue(50)
Select one or more items from a list. 
local Dropdown = Tab:AddDropdown("DropdownId", {
    Title = "Options",
    Values = {"A", "B", "C"},
    Multi = false,
    Default = "A",
    Search = true, -- Enable search
    AllowNull = false, -- Allow no selection (for Multi)
    Icon = "list",
    Callback = function(Value)
        print("Selected:", Value)
    end
})

Dropdown:OnChanged(function(Value) print("Changed:", Value) end)
Dropdown:SetValue("B")

​
Input

Text input field. 
local Input = Tab:AddInput("InputId", {
    Title = "User",
    Description = "Optional description",
    Default = "Block",
    Placeholder = "Enter name...",
    Numeric = false, -- Only allow numbers
    Finished = true, -- Only call callback when focus is lost
    MaxLength = 50, -- Max length of text
    Icon = "type", -- Lucide icon
    Callback = function(Value)
        print("Text:", Value)
    end
})

Input:OnChanged(function(Value) print("Input changed:", Value) end)
Input:SetValue("New Text")

​
Colorpicker

Select a color and transparency. 
local Colorpicker = Tab:AddColorpicker("ColorPickerId", {
    Title = "Highlight Color",
    Description = "Select target color",
    Default = Color3.fromRGB(255, 0, 0),
    Transparency = 0, -- Initial transparency (0-1)
    Icon = "palette",
    Callback = function(Value)
        print("Color:", Value)
    end
})

Colorpicker:OnChanged(function() print("Color changed") end)
Colorpicker:SetValueRGB(Color3.fromRGB(0, 255, 0))

​
Keybind

Bind a key to an action. Modes: Toggle, Hold, Always. 
local Keybind = Tab:AddKeybind("KeybindId", {
    Title = "Toggle Menu",
    Description = "Key to toggle UI",
    Default = "LeftAlt",
    Mode = "Toggle", -- "Toggle" | "Hold" | "Always"
    Icon = "keyboard",
    Callback = function(Value)
        print("Keybind clicked:", Value)
    end,
    ChangedCallback = function(NewKey)
        print("Keybind changed to:", NewKey)
    end
})

-- Methods
Keybind:OnClick(function() print("Clicked") end)
Keybind:OnChanged(function(Key) print("Changed to", Key) end)
Keybind:SetValue("RightControl", "Hold") -- Change key and mode

​
Paragraph

Display text information. 
Tab:AddParagraph({
    Title = "Info",
    Content = "This is a paragraph.\nIt can have multiple lines.",
    Icon = "info" -- Optional icon
})

​
Dialog

Show a modal dialog. 
Window:Dialog({
    Title = "Confirmation",
    Content = "Are you sure you want to proceed?",
    Buttons = {
        {
            Title = "Yes",
            Callback = function() print("Yes clicked") end
        },
        {
            Title = "No",
            Callback = function() print("No clicked") end
        }
    }
})