› Introduction

Introduction

ArrayField

This is the written documentation for the ArrayField Interface Suite.

Why choose ArrayField?

  • 🎨 Fully Themeable — Multiple built-in themes with custom theme support, switchable in-app

  • 📂 Category System — Organize tabs into collapsible sidebar groups

  • 🖥️ Built-in Console — Terminal-style log viewer with color coded entries

  • 🔔 Rich Notifications — Notifications with action buttons and icons

  • 💾 Auto Configuration Saving — Togglable from the in-app settings panel

  • 🔓 Open Source — Fully open source and free to use

  • 💃 Excellent Performance

Getting Started

To get started with ArrayField, check out the sidebar on the left. It provides quick links to help you use all ArrayField features in your project.

Found a missing feature? Please suggest it on Discord and even consider contributing on GitHub!

›Configuration ›Booting the Library

Booting the Library

Loading ArrayField

local ArrayField = loadstring(game:HttpGet('https://raw.githubusercontent.com/vqmpjayZ/laboratory/refs/heads/main/ArrayField/ArrayField.lua'))()

Enabling Configuration Saving

💡 tip
  1. Set a FolderName and FileName in the ConfigurationSaving table of CreateWindow
  2. Choose a unique Flag identifier for each supported element you create
  3. The user can enable or disable config saving from the in-app settings panel

ArrayField will automatically save and load the configuration when the user enables it from settings.

›Configuration ›Windows

Windows

Creating a Window

local Window = ArrayField:CreateWindow({
   Name = "My Script Hub",
   Icon = "shield",
   LoadingTitle = "Loading Script Hub",
   LoadingSubtitle = "by YourName",
   ConfigurationSaving = {
      FolderName = "MyScriptHub",
      FileName = "Config"
   }
})

Creating a Tab

local Tab = Window:CreateTab("Tab Example", "home")

Lucide Icon Support

Use Lucide Icons by passing the icon name as a string:

local Tab = Window:CreateTab("Combat", "sword")

Or Roblox asset IDs:

local Tab = Window:CreateTab("Tab Example", 4483362458)

All Lucide Icons · Supported Lucide Icons

Creating a Category

Categories organize tabs into collapsible groups in the sidebar.

local MainCategory = Window:CreateCategory("Main Features", {DefaultOpen = true})

Pass the category as the third argument to CreateTab:

local PlayerTab = Window:CreateTab("Player", "user", MainCategory)

Creating a Section

local Section = Tab:CreateSection("Section Example")

Updating a Section

Section:Set("New Title")

Separators & Spacing

Tab:CreateSeparator(Section, {
    Title = "Advanced Settings",
    Width = 0.9,
    Padding = 10
})

Tab:CreateSpacing(Section, 15)

Visibility & Destroying

ArrayField:SetVisibility(false)
ArrayField:IsVisible()
ArrayField:Destroy()
›Configuration›Themes

Themes

All themes are designed to display ArrayField in its best form. Users can switch themes at any time from the in-app settings panel.

Using Themes

Optionally set a default theme via DefaultTheme in CreateWindow:

local Window = ArrayField:CreateWindow({
    Name = "My Hub",
    DefaultTheme = "Ocean"
})
⚠️ note

Setting DefaultTheme overrides the user's previously selected theme on every execution. Omit it to let users keep their choice.

Themes Available

Default, AmberGlow, Amethyst, Bloom, DarkBlue, Green, Light, Ocean, Serenity

Custom Themes

Create your own theme by defining a table with all color properties:

{
    TextColor = Color3.fromRGB(240, 240, 240),
    Background = Color3.fromRGB(25, 25, 25),
    Topbar = Color3.fromRGB(34, 34, 34),
    Shadow = Color3.fromRGB(20, 20, 20),
    NotificationBackground = Color3.fromRGB(20, 20, 20),
    NotificationActionsBackground = Color3.fromRGB(230, 230, 230),
    TabBackground = Color3.fromRGB(80, 80, 80),
    TabStroke = Color3.fromRGB(85, 85, 85),
    TabBackgroundSelected = Color3.fromRGB(210, 210, 210),
    TabTextColor = Color3.fromRGB(240, 240, 240),
    SelectedTabTextColor = Color3.fromRGB(50, 50, 50),
    ElementBackground = Color3.fromRGB(35, 35, 35),
    ElementBackgroundHover = Color3.fromRGB(40, 40, 40),
    SecondaryElementBackground = Color3.fromRGB(25, 25, 25),
    ElementStroke = Color3.fromRGB(50, 50, 50),
    SecondaryElementStroke = Color3.fromRGB(40, 40, 40),
    SliderBackground = Color3.fromRGB(50, 138, 220),
    SliderProgress = Color3.fromRGB(50, 138, 220),
    SliderStroke = Color3.fromRGB(58, 163, 255),
    ToggleBackground = Color3.fromRGB(30, 30, 30),
    ToggleEnabled = Color3.fromRGB(0, 146, 214),
    ToggleDisabled = Color3.fromRGB(100, 100, 100),
    ToggleEnabledStroke = Color3.fromRGB(0, 170, 255),
    ToggleDisabledStroke = Color3.fromRGB(125, 125, 125),
    ToggleEnabledOuterStroke = Color3.fromRGB(100, 100, 100),
    ToggleDisabledOuterStroke = Color3.fromRGB(65, 65, 65),
    DropdownSelected = Color3.fromRGB(40, 40, 40),
    DropdownUnselected = Color3.fromRGB(30, 30, 30),
    InputBackground = Color3.fromRGB(30, 30, 30),
    InputStroke = Color3.fromRGB(65, 65, 65),
    PlaceholderColor = Color3.fromRGB(178, 178, 178)
}
›Interaction›Buttons

Buttons

Tab:CreateButton({
    Name = "Click Me",
    Description = "Appears on hover",
    Interact = "click",
    SectionParent = Section,
    Callback = function()
        print("Button clicked!")
    end
})
›Interaction›Toggles

Toggles

local Toggle = Tab:CreateToggle({
    Name = "Speed Boost",
    Description = "Increases movement speed",
    CurrentValue = false,
    Flag = "SpeedToggle",
    SectionParent = Section,
    Callback = function(Value)
        print("Speed Boost:", Value)
    end
})

Toggle:Set(true)
Toggle:Lock("Premium feature")
Toggle:Unlock()
›Interaction›Sliders

Sliders

local Slider = Tab:CreateSlider({
    Name = "Speed Multiplier",
    Range = {1, 10},
    Increment = 0.5,
    Suffix = "x",
    CurrentValue = 1,
    Flag = "SpeedValue",
    Callback = function(Value)
        print("Speed:", Value)
    end
})

Slider:Set(5)
›Interaction›Text Inputs

Text Inputs

local Input = Tab:CreateInput({
    Name = "Username",
    PlaceholderText = "Type here...",
    RemoveTextAfterFocusLost = false,
    NumbersOnly = false,
    CharacterLimit = 20,
    Callback = function(Text)
        print("Input:", Text)
    end
})

Input:Set("NewUsername")
›Interaction›Keybinds

Keybinds

local Keybind = Tab:CreateKeybind({
    Name = "Fly Key",
    CurrentKeybind = "F",
    HoldToInteract = false,
    Flag = "FlyKey",
    Callback = function()
        print("Fly key pressed!")
    end
})

Keybind:Set("G")
›Interaction›Dropdowns

Dropdowns

Single Selection

local Dropdown = Tab:CreateDropdown({
    Name = "Select Weapon",
    Options = {"Sword", "Axe", "Spear", "Bow"},
    CurrentOption = "Sword",
    MultiSelection = false,
    Callback = function(Option)
        print("Selected:", Option)
    end
})

Multi Selection

local Features = Tab:CreateDropdown({
    Name = "Enable Features",
    Options = {"Auto Heal", "Auto Attack", "Auto Block"},
    CurrentOption = {"Auto Heal"},
    MultiSelection = true,
    Callback = function(Option)
        print("Toggled:", Option)
    end
})

Methods

Dropdown:Set("Bow")
Dropdown:Add({"Dagger", "Staff"})
Dropdown:Remove("Sword")
Dropdown:Refresh({"Katana", "Claymore"}, "Katana")
›Interaction›Color Pickers

Color Pickers

local ColorPicker = Tab:CreateColorPicker({
    Name = "ESP Color",
    Color = Color3.fromRGB(255, 0, 0),
    Flag = "ESPColor",
    Callback = function(Color)
        print("Color:", Color)
    end
})

ColorPicker:Set(Color3.fromRGB(0, 255, 0))
›UI Components›Labels

Labels

Tab:CreateLabel({
    Text = "Welcome to my script!",
    Icon = "keyboard",
    Background = "warn", -- "warn", "success", "error", or hex "#FF69B4"
    SectionParent = Section
})
›UI Components›Paragraphs

Paragraphs

local Paragraph = Tab:CreateParagraph({
    Title = "<b>Getting Started</b>",
    Content = "This script includes powerful features.",
    Icon = "info",
    Background = "success",
    SectionParent = Section
})

Paragraph:Set({Title = "Updated", Content = "New content"})

Supports RichText in both Title and Content. Same Background options as Labels.

›UI Components›Images

Images

Tab:CreateImage(Section, {
    Image = "https://example.com/image.png",
    Width = 200,
    Height = 200,
    Transparency = 0
})

Accepts URLs, asset IDs, or file paths.

›UI Components›Console

Console

A built-in terminal-style log viewer with color coded entries, timestamps, auto-scroll, selectable text, and a configurable max line limit.

Creating a Console

local Console = Tab:CreateConsole({
    Title = "Remote Logger",
    Icon = "terminal",
    MaxLines = 200,
    Height = 150,
    Timestamps = true,
    SectionParent = Section
})

Logging Methods

Console:Log("Script initialized")       -- Gray   [LOG]
Console:Info("Listening for remotes")  -- Blue   [INFO]
Console:Success("Connected")         -- Green  [OK]
Console:Warn("Rate limit near")      -- Yellow [WARN]
Console:Error("Failed to fetch")     -- Red    [ERROR]

Console:Clear()
💡 tip

The console has a copy button to copy all entries and a trash button to clear (click once to confirm, click again within 2 seconds to clear). Entries are selectable — click any line to select and copy text from it. It also auto-scrolls to the latest entry.

›UI Components›Notifications

Notifications

Simple Notification

ArrayField:Notify({
    Title = "Success",
    Content = "Script loaded!",
    Duration = 5,
    Image = "check-circle"
})

With Actions

ArrayField:Notify({
    Title = "Update Available",
    Content = "A new version is ready.",
    Image = "download",
    Actions = {
        {Name = "Update", Callback = function() print("Updating") end},
        {Name = "Later", Callback = function() print("Dismissed") end}
    }
})
›UI Components›Prompts

Prompts & Dialogs

Note Prompt

Window:NotePrompt({
    Title = "Welcome!",
    Description = "Thanks for using this script",
    Icon = "sparkles",
    Callback = function() print("OK") end
})

Confirmation Dialog

Window:Prompt({
    Title = "Confirm Action",
    SubTitle = "Are you sure?",
    Content = "This cannot be undone.",
    Actions = {
        Confirm = {Name = "Yes", Callback = function() print("Yes") end},
        Cancel = {Name = "No", Callback = function() print("No") end}
    }
})
›Reference›Universal Methods

Universal Methods

All interactive elements support these common methods:

Element:Lock("Reason text")
Element:Unlock()
Element:Visible(false)
Element:Visible(true)
Element:Destroy()
›Reference›Saving & Loading

Saving & Loading

When ConfigurationSaving is set and the user enables it from settings, ArrayField automatically saves and loads element values using Flag identifiers.

ArrayField.SaveConfiguration()
ArrayField.LoadConfiguration()
print(ArrayField.Flags["SpeedToggle"].CurrentValue)

Destroying the UI

ArrayField:Destroy()

Completely removes the interface and cleans up all connections.

›Reference›Full Template

Full Template

A complete usage example demonstrating all ArrayField features. Copy this as a starting point.

local ArrayField = loadstring(game:HttpGet('https://raw.githubusercontent.com/vqmpjayZ/laboratory/refs/heads/main/ArrayField/ArrayField.lua'))()

-- ============================
-- WINDOW CREATION
-- ============================

local Window = ArrayField:CreateWindow({
    Name = "My Script Hub",
    Icon = "shield",
    LoadingTitle = "Loading Script Hub",
    LoadingSubtitle = "by YourName",
    -- DefaultTheme = "Default",
    ConfigurationSaving = {
        FolderName = "MyScriptHub",
        FileName = "Config"
    }
})

-- ============================
-- CATEGORIES & TABS
-- ============================

local MainTab = Window:CreateTab("Main", "home")
local CombatTab = Window:CreateTab("Combat", "sword")
local VisualsTab = Window:CreateTab("Visuals", "eye")

local MainCategory = Window:CreateCategory("Main Features", {DefaultOpen = true})
local SettingsCategory = Window:CreateCategory("Settings", {DefaultOpen = false})

local PlayerTab = Window:CreateTab("Player", "user", MainCategory)
local ConfigTab = Window:CreateTab("Config", "settings", SettingsCategory)

-- ============================
-- SECTIONS
-- ============================

local WelcomeSection = MainTab:CreateSection("Welcome")
local MovementSection = MainTab:CreateSection("Movement")

-- ============================
-- LABELS & PARAGRAPHS
-- ============================

MainTab:CreateLabel({
    Text = "Welcome to my script!",
    SectionParent = WelcomeSection
})

MainTab:CreateLabel({
    Text = "Press K to toggle the UI",
    Icon = "keyboard",
    SectionParent = WelcomeSection
})

MainTab:CreateLabel({
    Text = "Warning: Use at your own risk!",
    Background = "warn",
    SectionParent = WelcomeSection
})

MainTab:CreateParagraph({
    Title = "<b>Getting Started</b>",
    Content = "This script includes <i>powerful features</i> for your game.",
    Icon = "info",
    Background = "success",
    SectionParent = WelcomeSection
})

-- ============================
-- CONSOLE
-- ============================

local MyConsole = MainTab:CreateConsole({
    Title = "Event Logger",
    Icon = "terminal",
    MaxLines = 200,
    Height = 150,
    Timestamps = true,
    SectionParent = WelcomeSection
})

MyConsole:Log("Script initialized")
MyConsole:Info("Listening for events")
MyConsole:Success("Connected to server")
MyConsole:Warn("Rate limit approaching")
MyConsole:Error("Failed to fetch data")

-- ============================
-- BUTTONS
-- ============================

MainTab:CreateButton({
    Name = "Click Me",
    Description = "This description appears on hover",
    Interact = "click",
    SectionParent = MovementSection,
    Callback = function()
        print("Button clicked!")
    end
})

-- ============================
-- TOGGLES
-- ============================

local SpeedToggle = MainTab:CreateToggle({
    Name = "Speed Boost",
    Description = "Increases your movement speed",
    CurrentValue = false,
    Flag = "SpeedToggle",
    SectionParent = MovementSection,
    Callback = function(Value)
        print("Speed Boost:", Value)
    end
})

SpeedToggle:Set(true)
SpeedToggle:Lock("Feature disabled")
SpeedToggle:Unlock()

-- ============================
-- SLIDERS
-- ============================

local SpeedSlider = MainTab:CreateSlider({
    Name = "Speed Multiplier",
    Description = "Adjust your speed from 1x to 10x",
    Range = {1, 10},
    Increment = 0.5,
    Suffix = "x",
    CurrentValue = 1,
    Flag = "SpeedValue",
    SectionParent = MovementSection,
    Callback = function(Value)
        print("Speed set to:", Value)
    end
})

SpeedSlider:Set(5)

-- ============================
-- TEXT INPUTS
-- ============================

local UsernameInput = MainTab:CreateInput({
    Name = "Username",
    Description = "Enter a player's username",
    PlaceholderText = "Type here...",
    RemoveTextAfterFocusLost = false,
    NumbersOnly = false,
    CharacterLimit = 20,
    OnEnter = false,
    SectionParent = WelcomeSection,
    Callback = function(Text)
        print("Input text:", Text)
    end
})

UsernameInput:Set("NewUsername")

-- ============================
-- KEYBINDS
-- ============================

local FlyKeybind = MainTab:CreateKeybind({
    Name = "Fly Key",
    Description = "Press to toggle flight",
    CurrentKeybind = "F",
    HoldToInteract = false,
    Flag = "FlyKey",
    SectionParent = MovementSection,
    Callback = function(IsHeld)
        print("Fly key pressed!")
    end
})

FlyKeybind:Set("G")

-- ============================
-- DROPDOWNS
-- ============================

local WeaponDropdown = CombatTab:CreateDropdown({
    Name = "Select Weapon",
    Options = {"Sword", "Axe", "Spear", "Bow"},
    CurrentOption = "Sword",
    MultiSelection = false,
    Flag = "SelectedWeapon",
    Callback = function(Option)
        print("Selected:", Option)
    end
})

local FeaturesDropdown = CombatTab:CreateDropdown({
    Name = "Enable Features",
    Options = {"Auto Heal", "Auto Attack", "Auto Block", "Auto Dodge"},
    CurrentOption = {"Auto Heal"},
    MultiSelection = true,
    Flag = "EnabledFeatures",
    Callback = function(Option)
        print("Toggled:", Option)
    end
})

WeaponDropdown:Set("Bow")
WeaponDropdown:Add({"Dagger", "Staff"})
WeaponDropdown:Remove("Sword")
WeaponDropdown:Refresh({"Katana", "Claymore"}, "Katana")

-- ============================
-- COLOR PICKERS
-- ============================

local ESPColor = VisualsTab:CreateColorPicker({
    Name = "ESP Color",
    Color = Color3.fromRGB(255, 0, 0),
    Flag = "ESPColor",
    Callback = function(Color)
        print("Color changed:", Color)
    end
})

ESPColor:Set(Color3.fromRGB(0, 255, 0))

-- ============================
-- IMAGES
-- ============================

MainTab:CreateImage(WelcomeSection, {
    Image = "https://example.com/image.png",
    Width = 200,
    Height = 200,
    Transparency = 0
})

-- ============================
-- SEPARATORS & SPACING
-- ============================

MainTab:CreateSeparator(MovementSection, {
    Title = "Advanced Settings",
    Width = 0.9,
    Padding = 10
})

MainTab:CreateSpacing(MovementSection, 15)

-- ============================
-- NOTIFICATIONS
-- ============================

ArrayField:Notify({
    Title = "Success",
    Content = "Script loaded successfully!",
    Duration = 5,
    Image = "check-circle"
})

ArrayField:Notify({
    Title = "Update Available",
    Content = "A new version is ready. Update now?",
    Image = "download",
    Actions = {
        {Name = "Update", Callback = function() print("Updating...") end},
        {Name = "Later", Callback = function() print("Cancelled") end}
    }
})

-- ============================
-- PROMPTS & DIALOGS
-- ============================

Window:NotePrompt({
    Title = "Welcome!",
    Description = "Thanks for using this script",
    Icon = "sparkles",
    Callback = function()
        print("User clicked OK")
    end
})

Window:Prompt({
    Title = "Confirm Action",
    SubTitle = "Are you sure?",
    Content = "This action cannot be undone.",
    Actions = {
        Confirm = {Name = "Yes", Callback = function() print("Confirmed") end},
        Cancel = {Name = "No", Callback = function() print("Cancelled") end}
    }
})

-- ============================
-- UNIVERSAL ELEMENT METHODS
-- ============================

SpeedToggle:Lock("Premium feature")
SpeedToggle:Unlock()
SpeedToggle:Visible(false)
SpeedToggle:Visible(true)

-- ============================
-- SAVING & LOADING
-- ============================

ArrayField.SaveConfiguration()
ArrayField.LoadConfiguration()
print(ArrayField.Flags["SpeedToggle"].CurrentValue)

-- ArrayField:Destroy()