Ignite

https://ignite.blox.wiki
Admin
Ignite is a UI library for developing Roblox plugins, offering over 10 high-dpi compatible...
Tokens:13,444
Snippets:34
Trust Score:4.5
Update:1 year ago
Show doc for...
Tokens:
Raw
### Text Label Component Example

Source: https://ignite.blox.wiki/components/textLabel

A basic example demonstrating how to use the Text Label component to display 'Hello World! 👋'.

```lua
Scope:TextLabel {
  Text ="Hello World! 👋"
}
```

--------------------------------

### Widget Component Example

Source: https://ignite.blox.wiki/components/widget

Provides a code example demonstrating how to configure and use the Widget component with specific properties.

```lua
Scope:Widget {
  Id ="IgnitePlugin ",
  Title ="Ignite Plugin",
  InitDockState = Enum.InitialDockState.Float,
  FloatXSize =300, FloatYSize =150,
}
```

--------------------------------

### Container Component Example

Source: https://ignite.blox.wiki/components/container

A Lua code example demonstrating how to use the Container component with a header and content.

```lua
Scope:Container {
  Header = { Text ="My Awesome Container 🚀" },
  [Children] = {
    Scope:TextLabel {
      Text ="Content Goes Here :!\nContent Goes Here :!\nContent Goes Here :!",
      LineHeight =1.4,
    },
    Scope:PaddingLarge()
  }
}
```

--------------------------------

### Root Script Setup with Ignite and Fusion

Source: https://ignite.blox.wiki/index

This Lua script demonstrates the initial setup for a Roblox plugin using Ignite and Fusion. It includes module requirements and variable scoping.

```lua
--!strict
--> Modules -------------------------------------------------------------------------------------------
local Packages =-- Path to Packages.
local Fusion =require(Packages.Fusion)
local Ignite =require(Packages.Ignite)
-------------------------------------------------------------------------------------------------------
--> Variables -----------------------------------------------------------------------------------------
local Scope = Fusion.scoped(Fusion, Ignite)
-------------------------------------------------------------------------------------------------------
```

--------------------------------

### Text Input Example

Source: https://ignite.blox.wiki/components/textInput

Provides a Luau code example demonstrating how to configure and use the Text Input component with specific values, keybinds, and validation rules.

```luau
Scope:TextInput {
  Value ="7205",
  Keybind = { Enum.KeyCode.LeftControl, Enum.KeyCode.K },
  Validation = { Pattern ="%d+", Mode ="Restrict" :: "Restrict" },
}
```

--------------------------------

### Switch Component Properties and Example

Source: https://ignite.blox.wiki/components/switch

Demonstrates the usage of the Switch component in Ignite Blox, showcasing its properties for size and enabled state, along with a practical example.

```FusionScript
Scope:Switch {
  Size ="Large" :: "Large",
  Enabled =true
}
```

--------------------------------

### Image Background Component Example

Source: https://ignite.blox.wiki/components/imageBackground

A Lua code example demonstrating how to use the Image Background component. It sets the size and image source for the background.

```Lua
Scope:ImageBackground {
  Size = UDim2.new(1,0, 0,256),
  ImageSource ="rbxassetid://89904945503839",
  ImageSourceSize = Vector3.new(256, 0, 256)
}
```

--------------------------------

### Project.json Setup for Rojo

Source: https://ignite.blox.wiki/index

This JSON configuration demonstrates how to set up your project structure using Rojo, specifying the paths for your plugin's source code and packages.

```json
{
"name":"my_ignite_plugin",
"tree": {
"$className":"DataModel",
"ServerStorage": {
"Plugin": {
"$path":"src",// replace with the path to your plugin's source.
"Packages": { "$path":"Packages" }
      }
    }
  }
}
```

--------------------------------

### Accordion Component Usage Example

Source: https://ignite.blox.wiki/components/accordion

A practical example of how to implement the Accordion component in Lua, showcasing the structure for defining sections and specifying the initially expanded section.

```lua
Scope:Accordion {
  Width = UDim.new(1, 0),
  Sections = {
    { Title ="Section One", Content ="I am Section One! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis." },
    { Title ="Section Two", Content ="I am Section Two! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis." },
    { Title ="Section Three", Content ="I am Section Three! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis." }
  },
  ExpandedSection =2
}
```

--------------------------------

### Button Component Properties and Example

Source: https://ignite.blox.wiki/components/button

Demonstrates the usage of the Ignite Blox Button component, showcasing its configurable properties such as Width, Content, and Variant. The example provides a practical implementation of these properties.

```lua
Scope:Button {
  Width = UDim.new(1, 0),
  Content = { "rbxassetid://105356698746495", "Click Me!" },
  Variant ="Primary" :: "Primary"
}
```

--------------------------------

### Embedded Container Example

Source: https://ignite.blox.wiki/components/embeddedContainer

An example demonstrating how to use the Embedded Container component with various child elements like Buttons and layout managers (UIListLayout, UIPadding).

```Lua
Scope:EmbeddedContainer {
  Size = UDim2.new(1, 0),
  AutomaticSize = Enum.AutomaticSize.Y,
  StrokeBottom =true,
  [Children] = {
    Scope:Button {
      Width = UDim.new(1, 0),
      Content ="Export",
    },
    Scope:Button {
      Width = UDim.new(1, 0),
      Content ="Import",
      Variant ="Secondary" :: "Secondary"
    },
    Scope:New"UIListLayout" {
      FillDirection = Enum.FillDirection.Horizontal,
      HorizontalFlex = Enum.UIFlexAlignment.Fill,
      Padding = UDim.new(0, 8)
    },
    Scope:New"UIPadding" {
      PaddingLeft = UDim.new(0, 8), PaddingRight = UDim.new(0, 8),
      PaddingTop = UDim.new(0, 8), PaddingBottom = UDim.new(0, 8),
    }
  }
}
```

--------------------------------

### Example Ignite Plugin Project

Source: https://ignite.blox.wiki/index

This comprehensive Lua script showcases a functional Ignite plugin. It utilizes Fusion for state management and UI rendering, demonstrating the creation of a counter with a text label and an increment button.

```lua
--!strict
--> Modules -------------------------------------------------------------------------------------------
local Packages = script.Parent.Packages
local Fusion =require(Packages.Fusion)
local Ignite =require(Packages.Ignite)
-------------------------------------------------------------------------------------------------------
--> Variables -----------------------------------------------------------------------------------------
local Scope = Fusion.scoped(Fusion, Ignite)
local Children, OnEvent, peek = Fusion.Children, Fusion.OnEvent, Fusion.peek
-------------------------------------------------------------------------------------------------------
local CounterState = Scope:Value(0)
local ComputeLabelText = Scope:Computed(function(use) return`Counter is: {use(CounterState)}` end)
Scope:Widget {
  Id ="IgnitePlugin",
  Title ="My First Ignite Plugin 🚀",
  InitDockState = Enum.InitialDockState.Left,
  FloatXSize =300, FloatYSize =800,
  [Children] = {
    Scope:TextLabel {
      Text = ComputeLabelText,
      LayoutOrder =0
    },
    Scope:Button {
      Content ="Increment Counter!",
      LayoutOrder =1,
      [OnEvent"MouseButton1Click"] =function()
        CounterState:set(peek(CounterState) +1)
end
    },
    Scope:New"UIListLayout" {
      SortOrder = Enum.SortOrder.LayoutOrder,
      Padding = UDim.new(0, 8)
    },
    Scope:New"UIPadding" {
      PaddingLeft = UDim.new(0, 8), PaddingRight = UDim.new(0, 8),
      PaddingTop = UDim.new(0, 8), PaddingBottom = UDim.new(0, 8)
    }
  }
}
```

--------------------------------

### Code Label Component Usage Example

Source: https://ignite.blox.wiki/components/codeLabel

Provides an example of how to use the Code Label component in Lua, demonstrating how to set its text content to display a simple Lua function.

```Lua
Scope:CodeLabel {
  Text ="local function()\n    return print(\"Hello World! 👋\")\nend"
}
```

--------------------------------

### Navigation Component Properties and Example

Source: https://ignite.blox.wiki/components/navigation

This section provides API documentation for the Navigation component's properties and a Lua code example demonstrating its usage. The properties define the behavior and appearance of the navigation, such as the sections it displays and which section is active.

```APIDOC
Navigation Component API Documentation:

Properties:
  Sections: { string | Fusion.Child } - The sections for the navigation component.
  ActiveSection: Fusion.UsedAs<number>? - The index of the section in the `Sections` array to be active. (Set to `nil` to have no section active).
  DefaultActiveSection: Fusion.UsedAs<number?>? - If no section is active then this section will automatically become active.
  FillDirection: Fusion.UsedAs<Enum.FillDirection>? - The fill direction for the navigation (Defaults to `Enum.FillDirection.Horizontal`).

Example Usage:
Scope:Navigation {
  Sections = { "Hello World", "Baz", "Foo Bar" },
  DefaultActiveSection =2,
  ActiveSection =3
}
```

```Lua
Scope:Navigation {
  Sections = { "Hello World", "Baz", "Foo Bar" },
  DefaultActiveSection =2,
  ActiveSection =3
}
```

--------------------------------

### Install Ignite via Wally

Source: https://ignite.blox.wiki/index

This snippet shows how to declare the Ignite library dependency in your project's configuration file, typically for use with Wally package manager.

```lua
ignite = "cameronpcampbell/ignite@1.2.0"
```

--------------------------------

### Map Component Example

Source: https://ignite.blox.wiki/components/map

Demonstrates how to use the Map component in Ignite Blox, showcasing the structure for defining headers, sections with key-value pairs, and applying validation to values.

```Lua
Scope:Map {
  Header = { Text ="Parameters" },
  Sections = {
    { Key ="Scale", Value = { Text ="0", Validation ="%d+" } },
    { Key ="Name", Value ="CoolName" } :: any,
    { Key ="Type", Value ="MyType" } :: any,
  }
}
```

--------------------------------

### Tabs Component Properties and Example

Source: https://ignite.blox.wiki/components/tabs

This snippet demonstrates the properties available for the Tabs component in Ignite Blox, including Width, ActiveSection, DefaultActiveSection, SectionSizing, and RightContent. It also provides a practical example of how to implement the Tabs component with defined sections.

```APIDOC
Tabs Component Documentation:

Properties:
  - Width: Fusion.UsedAs<UDim>?
    Description: The width of the accordion. Defaults to `UDim.new(1, 0)`.
  - ActiveSection: Fusion.UsedAs<number>?
    Description: The index of the section in the `Sections` array to be active. Defaults to `DefaultActiveSection`.
  - DefaultActiveSection: Fusion.UsedAs<number?>?
    Description: If no section is active, this section will automatically become active.
  - SectionSizing: Fusion.UsedAs<"Fit" | "Fill">?
    Description: The sizing mode for the tabs.
  - RightContent: Fusion.Child?
    Description: Optional content to display to the right of the component.

Example Usage:
Scope:Tabs {
  Width = UDim.new(1, 0),
  Sections = {
    { Text ="Cool Tab" },
    { Text ="Awesome Tab" },
    { Text ="Epic Tab" }
  }
}
```

```lua
Scope:Tabs {
  Width = UDim.new(1, 0),
  Sections = {
    { Text ="Cool Tab" },
    { Text ="Awesome Tab" },
    { Text ="Epic Tab" }
  }
}
```

--------------------------------

### Accordion Component Properties and Example

Source: https://ignite.blox.wiki/components/accordion

This section details the properties of the Accordion component and provides a Lua code example for its usage. The properties include Width, Sections, and ExpandedSection, which control the appearance and behavior of the accordion.

```APIDOC
Accordion:
  Properties:
    Width: Fusion.UsedAs<UDim>? - The width of the accordion. (Defaults to `UDim.new(1, 0)`).
    Sections: {{ Title: string, Content: string }} - The sections for the accordion.
    ExpandedSection: Fusion.UsedAs<number?>? - The index of the section in the `Sections` array to be expanded. (Set to `nil` to have no section expanded).
  Example:
    Scope:Accordion {
      Width = UDim.new(1, 0),
      Sections = {
        { Title ="Section One", Content ="I am Section One! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis." },
        { Title ="Section Two", Content ="I am Section Two! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis." },
        { Title ="Section Three", Content ="I am Section Three! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis." }
      },
      ExpandedSection =2
    }
```

--------------------------------

### Slider Component Properties and Example

Source: https://ignite.blox.wiki/components/slider

Demonstrates the properties available for the Slider component in Ignite Blox, such as Width, ProgressPercent, and StepSize, and provides a Lua code snippet for its usage.

```APIDOC
Slider Component Documentation:

Allows the user to select a value (from 0 to 1).

Properties:
- Width: Fusion.UsedAs<UDim>?
  - The width of the slider. (Defaults to `UDim.new(1, 0)`).
- ProgressPercent: Fusion.UsedAs<number>?
  - The progress (value between 0 and 1) of the slider. (Defaults to `0`).
- StepSize: Fusion.UsedAs<number>?
  - The amount that is incremented when the user is dragging the slider. (Defaults to `1`).

Example Usage:
```lua
Scope:Slider {
  Width = UDim.new(1, 0),
  ProgressPercent =.75
}
```
```

```lua
Scope:Slider {
  Width = UDim.new(1, 0),
  ProgressPercent =.75
}
```

--------------------------------

### Checkbox Component Properties and Example

Source: https://ignite.blox.wiki/components/checkbox

This snippet details the properties of the Checkbox component and provides an example of how to use it. The 'Enabled' property controls the state of the checkbox, accepting a boolean or null value.

```APIDOC
Checkbox:
  Properties:
    Enabled: Fusion.UsedAs<boolean?>?
      The state of the checkbox.
  Example:
    Scope:Checkbox {
      Enabled =true
    }
```

--------------------------------

### Scrollable Component Example

Source: https://ignite.blox.wiki/components/scrollable

Demonstrates the usage of the Scrollable component, setting its size, canvas size, and nesting a TextLabel with scrollable content. Currently, only the Y axis is supported.

```lua
Scope:Scrollable {
  Size = UDim2.new(1,0, 0,150),
  CanvasSize = UDim2.fromOffset(0, 500),
  [Children] = Scope:TextLabel {
    Text ="Scrollable Content Goes Here !\nScrollable Content Goes Here !\nScrollable Content Goes Here !",
    LineHeight =1.4,
  },
}
```

--------------------------------

### Get Theme Item

Source: https://ignite.blox.wiki/utilities/theme

Retrieves a specific theme item from the current theme configuration for a given scope. It allows applying mutators and tweening.

```APIDOC
APIDOC:
  :GetThemeItem(scope: Fusion.Scope, item: Fusion.UsedAs<ThemeItem>, mutator: Fusion.UsedAs<Types.MutatorPreset | (self: Color3) -> Color3 | nil>?, twInfo: Fusion.UsedAs<TweenInfo?>?)
    Parameters:
      scope: The scope to get the theme item for.
      item: The theme item to get. Examples: "Background/Primary", "Text/Title".
      mutator: The mutator to apply to this instance of the theme item. Choose from a preset or make your own.
      twInfo: The tween info to apply to item. Defaults to `TweenInfo.new(.3, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)`.
    Types:
      ThemeItem = "Background/Primary" | "Background/Secondary" | "Background/Tertiary" | "Background/Stroke" | "Text/Title" | "Text/Body" | "Accent/Primary" | "Accent/Secondary" | "Accent/Destructive"
      MutatorPreset = "Default" | "Hover" | "Focus" | "Highlight"
```

--------------------------------

### Progress Component Usage

Source: https://ignite.blox.wiki/components/progress

Demonstrates how to use the Ignite Blox Progress component with custom width, progress percentage, and sections.

```lua
Scope:Progress {
  Width = UDim.new(1, 0),
  ProgressPercent =.65,
  Sections = { "⌛ Step One: Loading", "🛡️ Step Two: Verifying", "💾 Step 3: Applying" }
}
```

--------------------------------

### Set Theme Configuration

Source: https://ignite.blox.wiki/utilities/theme

Sets the theme for a given scope. It accepts a theme configuration object or a default theme string.

```APIDOC
APIDOC:
  :SetTheme(scope: Fusion.Scope, theme: ThemeConfig | DefaultTheme)
    Parameters:
      scope: The scope to set the theme for.
      theme: The new theme for the scope. Can be a ThemeConfig object or a DefaultTheme string.
    Types:
      ThemeConfig = {
        Background: {
          Primary: Color3,
          Secondary: Color3,
          Tertiary: Color3,
          Stroke: Color3
        },
        Text: {
          Title: Color3,
          Body: Color3
        },
        Accent: {
          Primary: Color3,
          Secondary: Color3,
          Destructive: Color3
        }
      }
      DefaultTheme = "Dark"
```

--------------------------------

### Background Component Usage

Source: https://ignite.blox.wiki/components/background

This snippet demonstrates how to use the Background component in Ignite Blox. It shows how to define the size of the background frame to match the parent's scale, ensuring it covers the entire area.

```lua
Scope:Background {
  Size = UDim.fromScale(1, 1)
}
```

--------------------------------

### Container Component API Documentation

Source: https://ignite.blox.wiki/components/container

Defines the properties and structure for the Ignite Blox Container component. It includes properties for width, header configuration, and child elements.

```APIDOC
Container:
  Properties:
    Width: Fusion.UsedAs? - The width of the container. (Defaults to `UDim.new(1, 0)`).
    Header: HeaderProps - The properties for the container's header (omit if you do not want one).

  HeaderProps:
    Text: Fusion.UsedAs<string> - The Text (title) for the header.
    IsExpanded: Fusion.UsedAs<boolean>? - If the container should be expanded.
    Content: Fusion.UsedAs<Fusion.Child>? - The header content (aligned to the right).
    Disabled: Fusion.UsedAs<boolean>? - If the header is to be disabled. Designed for toggling the header via a state object.
```

--------------------------------

### Image Background Component Properties

Source: https://ignite.blox.wiki/components/imageBackground

Defines the properties for the Image Background component. ImageSource specifies the image to be displayed, and ImageSourceSize determines the size of the image source, optimized for performance using Vector3.

```APIDOC
ImageBackground:
  Properties:
    ImageSource: string (EditableImage) - The source of the image.
    ImageSourceSize: Fusion.UsedAs<Vector3> - The size of the image source. Uses `Vector3` for performance reasons - only the `X` and `Z` components are used.
```

--------------------------------

### Text Input Component Properties

Source: https://ignite.blox.wiki/components/textInput

Defines the properties for the Text Input component, including its dimensions, placeholder text, current value, visual variant, keybind for focus, and validation rules.

```APIDOC
Text Input Properties:

Name | Type | Description
---|---|---
Width | Fusion.UsedAs<UDim>? | The width of the text input. (Defaults to `UDim.new(1, 0)`).
Placeholder | Fusion.UsedAs<string?> | The placeholder for the text input.
Value | Fusion.UsedAs<string?> | The value of the text input.
Variant | Fusion.UsedAs<"Primary" | "Secondary" | nil>? | The variant for the text input. (Defaults to `"Primary"`).
Keybind | Fusion.UsedAs<{ Enum.KeyCode }>? | Specifies a keybind that can be used to focus the text input.
Validation | ValidationProps | string | nil | Specifies a pattern that the text input's data must conform to.
```

--------------------------------

### Widget Component Properties

Source: https://ignite.blox.wiki/components/widget

Defines the properties available for the Widget component, including its identifier, title, docking state, enabled state, sizing, and debugging mode.

```APIDOC
Widget:
  Id: string
    The Identifier of the widget.
  Title: (string | Fusion.Value<string> | Fusion.Computed<string>)?
    The title of the widget.
  InitDockState: Enum.InitialDockState?
    The initial dock state for the widget.
  InitEnabled: boolean?
    The enabled state of the Widget if it does not have a saved state from a previous session.
  OverrideEnabledRestore: boolean?
    If true, will override any saved enabled state with the `InitEnabled` value.
  FloatXSize: number?
    The initial pixel width of the PluginGui when floating.
  FloatYSize: number?
    The initial pixel height of the PluginGui when floating.
  MinWidth: number?
    The minimum pixel width of the PluginGui. (Defaults to `FloatXSize`).
  MinHeight: number?
    The minimum pixel height of the PluginGui. (Defaults to `FloatYSize`).
  DebugMode: boolean?
    If true then an unhydrated copy of the widgets children is parented to `StarterGui`.
```

--------------------------------

### Map Component API Documentation

Source: https://ignite.blox.wiki/components/map

Provides a detailed breakdown of the Map component's properties and their types, including Header, Sections, and the callback function @OnItemUpdate. It also details nested property types like HeaderProps, MapValueProps, and ValidationProps.

```APIDOC
Map:
  Properties:
    Header: HeaderProps | The optional header for the map.
    Sections: {{ Key: string, Value: string | MapValueProps }} | The key-value pairs for the map.
    @OnItemUpdate: (itemName: string, itemIdx: number, newValue: unknown, oldValue: unknown) -> () | A function that runs when one of the key-value pairs is updated.

  HeaderProps:
    Text: Fusion.UsedAs<string> | The Text (title) for the header.
    IsExpanded: Fusion.UsedAs<boolean>? | If the container should be expanded.
    Content: Fusion.UsedAs<Fusion.Child>? | The header content (aligned to the right).
    Disabled: Fusion.UsedAs<boolean>? | If the header is to be disabled. Designed for toggling the header via a state object.

  MapValueProps:
    Text: Fusion.UsedAs<string>? | The text for the value.
    Placeholder: Fusion.UsedAs<string>? | The optional placeholder text for the value.
    Validation: string | ValidationProps | nil | The optional validation for the value.

  ValidationProps:
    Pattern: Fusion.UsedAs<string> | The [string pattern](https://create.roblox.com/docs/luau/strings#string-pattern-reference) that the text input's data must conform to.
    Mode: Fusion.UsedAs<"Restrict" | "ErrorVisual" | nil> | `Restrict` prevents data that does not match the pattern from being inside of the text input whilst `ErrorVisual` shows a red outline around the text input when its data does not conform to the pattern.
```

--------------------------------

### Code Label Component Properties

Source: https://ignite.blox.wiki/components/codeLabel

Defines the properties for the Code Label component, specifying how to customize its appearance and behavior, including text content, size, focus, font styles, and font IDs.

```APIDOC
Code Label Properties:

Name | Type | Description
---|---|---
Text | Fusion.UsedAs<string?> | The text content of the component.
TextSize | Fusion.UsedAs? | The size of the text.
Focus | Fusion.UsedAs<"Title" | "Body">? | The focus mode of the text label. (affects the text color).
Weight | Fusion.UsedAs<Enum.FontWeight>? | The font weight of the text label.
Style | Fusion.UsedAs<Enum.FontStyle>? | The font style of the text label.
FontId | Fusion.UsedAs<number>? | The font Id of the text label (Defaults to the `Builder Sans` font Id).
```

--------------------------------

### Text Label Component Properties

Source: https://ignite.blox.wiki/components/textLabel

Defines the properties for the Text Label component, including text content, size, focus, font weight, style, and font ID. The 'Focus' property affects text color and defaults to 'Title'.

```APIDOC
Text Label Properties:

Name | Type | Description
---|---|---
Text | Fusion.UsedAs<string?> | The text content of the component.
TextSize | Fusion.UsedAs? | The size of the text.
Focus | Fusion.UsedAs<"Title" | "Body">? | The focus mode of the text label. (Effects the text color). (Defaults to "Title").
Weight | Fusion.UsedAs<Enum.FontWeight>? | The font weight of the text label. (Defaults)
Style | Fusion.UsedAs<Enum.FontStyle>? | The font style of the text label.
FontId | Fusion.UsedAs<number>? | The font Id of the text label (Defaults to the `Builder Sans` font Id).
```

--------------------------------

### Text Input Validation Properties

Source: https://ignite.blox.wiki/components/textInput

Details the validation properties for the Text Input component, specifying the pattern the input must match and the mode of validation (Restrict or ErrorVisual).

```APIDOC
Validation Properties (`ValidationProps`):

Name | Type | Description
---|---|---
Pattern | Fusion.UsedAs<string> | The [string pattern (opens in a new tab)](https://create.roblox.com/docs/luau/strings#string-pattern-reference) that the text input's data must conform to.
Mode | Fusion.UsedAs<"Restrict" | "ErrorVisual" | nil> |  `Restrict` prevents data that does not match the pattern from being inside of the text input whilst `ErrorVisual` shows a red outline around the text input when its data does not conform to the pattern.
```

--------------------------------

### Embedded Container Properties

Source: https://ignite.blox.wiki/components/embeddedContainer

Defines the properties for the Embedded Container component. These properties control the visual appearance and behavior of the container, such as stroke visibility and child element layering.

```APIDOC
EmbeddedContainer:
  StrokeBottom: Fusion.UsedAs<boolean>? | if the container should have a stroke on the bottom.
  StrokeTop: Fusion.UsedAs<boolean>? | if the container should have a stroke on the top.
  StrokeLeft: Fusion.UsedAs<boolean>? | if the container should have a stroke on the left.
  StrokeRight: Fusion.UsedAs<boolean>? | if the container should have a stroke on the right.
  ChildrenZIndex: Fusion.UsedAs<number>? | The ZIndex of the container's children wrapper.
```
Tokens:
Raw