Documentation/content/ui-systems/ui-widgets.en.md

---
title: UI Widgets
type: docs
weight: 12
---

This page documents all available widget types in Hytale's UI system.

## Container Widgets

### Group

Basic container for organizing other widgets.

```
Group #Container {
  Anchor: (Width: 400, Height: 300);
  Background: (Color: #000000(0.5));
  LayoutMode: Top;
  Padding: (Full: 16);

  // Child widgets...
}
```

**Key Properties:**
- `Anchor` - Position and size
- `Background` - Background color or texture
- `LayoutMode` - Child arrangement mode
- `Padding` - Inner spacing
- `Visible` - Show/hide
- `FlexWeight` - Flexible sizing weight

## Text Widgets

### Label

Displays static or dynamic text.

```
Label #Title {
  Text: "Hello World";
  Style: (
    FontSize: 24,
    TextColor: #ffffff,
    RenderBold: true,
    HorizontalAlignment: Center,
    VerticalAlignment: Center
  );
  Anchor: (Height: 40);
}
```

**Key Properties:**
- `Text` - Text content (string or `%translation.key`)
- `Style` - LabelStyle object
- `Anchor` - Position and size
- `Padding` - Text padding

## Button Widgets

### Button

Clickable button without text label.

```
Button #CloseButton {
  Anchor: (Width: 32, Height: 32);
  Style: (
    Default: (Background: "CloseButton.png"),
    Hovered: (Background: "CloseButtonHovered.png"),
    Pressed: (Background: "CloseButtonPressed.png"),
    Disabled: (Background: "CloseButtonDisabled.png"),
    Sounds: @ButtonSounds
  );
}
```

### TextButton

Button with text label.

```
TextButton #SubmitButton {
  Text: %ui.button.submit;
  Style: (
    Default: (
      Background: (TexturePath: "Button.png", Border: 12),
      LabelStyle: (FontSize: 16, TextColor: #ffffff)
    ),
    Hovered: (
      Background: (TexturePath: "ButtonHovered.png", Border: 12),
      LabelStyle: (FontSize: 16, TextColor: #ffffff)
    ),
    Pressed: (
      Background: (TexturePath: "ButtonPressed.png", Border: 12),
      LabelStyle: (FontSize: 16, TextColor: #cccccc)
    ),
    Sounds: @ButtonSounds
  );
  Anchor: (Height: 44);
  Padding: (Horizontal: 24);
}
```

### BackButton

Pre-styled back/dismiss button.

```
BackButton {}
```

### ActionButton

Button that displays an action name with input binding.

```
ActionButton #BindingInventory {
  Disabled: true;
  LayoutMode: Right;
  Alignment: Right;
  ActionName: %client.hud.inputBindings.inventory;
  Anchor: (Top: 15);
}
```

## Input Widgets

### TextField

Single-line text input.

```
TextField #NameInput {
  Anchor: (Height: 38);
  Style: @DefaultInputFieldStyle;
  PlaceholderStyle: @DefaultInputFieldPlaceholderStyle;
  Background: (TexturePath: "InputBox.png", Border: 16);
  Padding: (Horizontal: 10);
  PlaceholderText: %ui.placeholder.enterName;
}
```

### NumberField

Numeric input field.

```
NumberField #QuantityInput {
  Anchor: (Width: 100, Height: 38);
  Style: @DefaultInputFieldStyle;
  Background: (TexturePath: "InputBox.png", Border: 16);
  Padding: (Horizontal: 10);
  Min: 1;
  Max: 100;
}
```

### CompactTextField

Expandable search-style text field.

```
CompactTextField #SearchInput {
  Anchor: (Height: 30);
  CollapsedWidth: 34;
  ExpandedWidth: 200;
  PlaceholderText: %ui.search.placeholder;
  Style: (FontSize: 16);
  PlaceholderStyle: (TextColor: #3d5a85, RenderUppercase: true, FontSize: 14);
  Padding: (Horizontal: 12, Left: 34);
  Decoration: (
    Default: (
      Icon: (Texture: "SearchIcon.png", Width: 16, Height: 16, Offset: 9),
      ClearButtonStyle: @ClearButtonStyle
    )
  );
  ExpandSound: (SoundPath: "Sounds/Expand.ogg", Volume: 6);
  CollapseSound: (SoundPath: "Sounds/Collapse.ogg", Volume: 5);
}
```

### Slider

Horizontal slider control.

```
Slider #VolumeSlider {
  Anchor: (Width: 200, Height: 16);
  Style: (
    Background: (TexturePath: "SliderBackground.png", Border: 2),
    Handle: "SliderHandle.png",
    HandleWidth: 16,
    HandleHeight: 16,
    Sounds: (
      Activate: (SoundPath: "Tick.ogg", Volume: 10),
      MouseHover: (SoundPath: "Hover.ogg", Volume: 6)
    )
  );
  Min: 0;
  Max: 100;
  Value: 50;
}
```

### SliderNumberField

Combined slider with numeric display.

```
SliderNumberField #BrightnessSlider {
  Anchor: (Width: 270, Height: 5);
  SliderStyle: @DefaultSliderStyle;
  NumberFieldStyle: @DefaultInputFieldStyle;
}
```

### CheckBox

Toggle checkbox.

```
CheckBox #EnableOption {
  Anchor: (Width: 22, Height: 22);
  Background: (TexturePath: "CheckBoxFrame.png", Border: 7);
  Padding: (Full: 4);
  Style: (
    Unchecked: (
      DefaultBackground: (Color: #00000000),
      HoveredBackground: (Color: #00000000),
      ChangedSound: (SoundPath: "Untick.ogg", Volume: 6)
    ),
    Checked: (
      DefaultBackground: (TexturePath: "Checkmark.png"),
      HoveredBackground: (TexturePath: "Checkmark.png"),
      ChangedSound: (SoundPath: "Tick.ogg", Volume: 6)
    )
  );
  Value: false;
}
```

### DropdownBox

Dropdown selection menu.

```
DropdownBox #LanguageSelector {
  Anchor: (Width: 330, Height: 32);
  Style: (
    DefaultBackground: (TexturePath: "Dropdown.png", Border: 16),
    HoveredBackground: (TexturePath: "DropdownHovered.png", Border: 16),
    PressedBackground: (TexturePath: "DropdownPressed.png", Border: 16),
    DefaultArrowTexturePath: "DropdownCaret.png",
    ArrowWidth: 13,
    ArrowHeight: 18,
    LabelStyle: (TextColor: #96a9be, FontSize: 13),
    PanelBackground: (TexturePath: "DropdownBox.png", Border: 16),
    EntryHeight: 31,
    EntriesInViewport: 10,
    Sounds: @DropdownBoxSounds
  );
}
```

## Display Widgets

### Sprite

Animated or static image.

```
Sprite #LoadingSpinner {
  Anchor: (Width: 32, Height: 32);
  TexturePath: "Spinner.png";
  Frame: (Width: 32, Height: 32, PerRow: 8, Count: 72);
  FramesPerSecond: 30;
}
```

### AssetImage

Display an asset image (item icon, etc.).

```
AssetImage #ItemIcon {
  Anchor: (Width: 64, Height: 64);
}
```

### ProgressBar

Progress indicator bar.

```
ProgressBar #HealthBar {
  Anchor: (Width: 200, Height: 20);
  BarTexturePath: "HealthBarFill.png";
  Alignment: Horizontal;
  Direction: Start;
  Value: 0.75;
}
```

**Properties:**
- `Alignment` - `Horizontal` or `Vertical`
- `Direction` - `Start` or `End`
- `Value` - 0.0 to 1.0

## Inventory Widgets

### ItemGrid

Grid display for inventory items.

```
ItemGrid #HotbarGrid {
  SlotsPerRow: 9;
  Style: (
    SlotBackground: "ItemSlot.png",
    SlotSize: 64,
    SlotSpacing: 4,
    HoveredSlotBackground: "ItemSlotHovered.png",
    SelectedSlotBackground: "ItemSlotSelected.png"
  );
  Background: (TexturePath: "HotbarBackground.png", Border: 10);
  Padding: 4;
  RenderItemQualityBackground: true;
  AreItemsDraggable: true;
}
```

## Navigation Widgets

### TabNavigation

Tab-based navigation.

```
TabNavigation #CategoryTabs {
  Style: (
    TabStyle: (
      Default: (Background: "Tab.png", IconAnchor: (Width: 44, Height: 44)),
      Hovered: (Background: "TabHovered.png"),
      Pressed: (Background: "TabPressed.png")
    ),
    SelectedTabStyle: (
      Default: (Background: "TabSelected.png", Overlay: "TabSelectedOverlay.png")
    ),
    TabSounds: @TabSounds
  );
}
```

## Tooltip Properties

Many widgets support tooltips:

```
TextButton #InfoButton {
  TooltipText: %ui.tooltip.info;
  TextTooltipStyle: (
    Background: (TexturePath: "TooltipBackground.png", Border: 24),
    MaxWidth: 400,
    LabelStyle: (Wrap: true, FontSize: 16),
    Padding: 24
  );
}
```

## Widget Summary Table

| Widget | Purpose |
|--------|---------|
| `Group` | Container for layout |
| `Label` | Text display |
| `Button` | Clickable button |
| `TextButton` | Button with text |
| `BackButton` | Pre-styled back button |
| `ActionButton` | Action with keybind display |
| `TextField` | Text input |
| `NumberField` | Numeric input |
| `CompactTextField` | Expandable search field |
| `Slider` | Slider control |
| `SliderNumberField` | Slider with number display |
| `CheckBox` | Toggle checkbox |
| `DropdownBox` | Selection dropdown |
| `Sprite` | Image/animation |
| `AssetImage` | Asset icon display |
| `ProgressBar` | Progress indicator |
| `ItemGrid` | Inventory grid |
| `TabNavigation` | Tab navigation |