Ui
Buttons, layout, forms and the rest of the interface toolkit. Ui is a reactive component library: every function emits a piece of the interface into an enclosing tree, and most container components take a block of nested content built from more Ui calls. It spans layout (Ui.Layout.Column, Ui.Layout.Grid), content and inputs, buttons that write directly to state, overlays and popups, a full form and validation system, and a theming model. Component names are sub-namespaced — Ui.Content.Text, Ui.Button.Integer.Increment — grouping related pieces.
Contents
Types
Functions
- Ui.Active.Disable
- Ui.Active.Enable
- Ui.Active.IsDisabled
- Ui.Active.IsEnabled
- Ui.Attribute
- Ui.Button.Array.Insert
- Ui.Button.Array.Pop
- Ui.Button.Array.Push
- Ui.Button.Array.Remove
- Ui.Button.Array.Swap
- Ui.Button.Boolean.False
- Ui.Button.Boolean.Toggle
- Ui.Button.Boolean.True
- Ui.Button.Disabled
- Ui.Button.Integer.Add
- Ui.Button.Integer.Decrement
- Ui.Button.Integer.Increment
- Ui.Button.Integer.Subtract
- Ui.Button.Real.Add
- Ui.Button.Real.Subtract
- Ui.Button.Value.Setter
- Ui.Click.Setter
- Ui.Component
- Ui.Content.Area
- Ui.Content.Icon
- Ui.Content.Image
- Ui.Content.Panel
- Ui.Content.Section
- Ui.Content.Text
- Ui.Content.Title
- Ui.Form
- Ui.Form.Field
- Ui.Form.Field.Checkbox
- Ui.Form.Field.Email
- Ui.Form.Field.Hidden
- Ui.Form.Field.Image
- Ui.Form.Field.Number
- Ui.Form.Field.OptionalNonEmptyString
- Ui.Form.Field.Password
- Ui.Form.Field.PhoneNumber
- Ui.Form.Field.ReadOnly
- Ui.Form.Field.Text
- Ui.Form.Field.Textarea
- Ui.Form.Submit
- Ui.Form.Validate.Integer.Max
- Ui.Form.Validate.Integer.Min
- Ui.Form.Validate.Integer.Positive
- Ui.Form.Validate.Real.Max
- Ui.Form.Validate.Real.Min
- Ui.Form.Validate.Real.Positive
- Ui.Form.Validate.Required
- Ui.Form.Validate.String.ContainsOnly
- Ui.Form.Validate.String.Email
- Ui.Form.Validate.String.MaxLength
- Ui.Form.Validate.String.MinLength
- Ui.Form.Validate.String.Pattern
- Ui.Icon.Add
- Ui.Icon.Back
- Ui.Icon.Blank
- Ui.Icon.Close
- Ui.Icon.Delete
- Ui.Icon.Edit
- Ui.Icon.Forward
- Ui.Icon.Home
- Ui.Icon.Icon
- Ui.Icon.Menu
- Ui.Icon.Profile
- Ui.Icon.Search
- Ui.Icon.Settings
- Ui.Input.Checkbox
- Ui.Input.Frame
- Ui.Input.Number
- Ui.Input.Password
- Ui.Input.Text
- Ui.Input.Textarea
- Ui.Layout.Column
- Ui.Layout.Grid
- Ui.Layout.Height
- Ui.Layout.Position
- Ui.Layout.Row
- Ui.Layout.Scrollable
- Ui.Layout.Size
- Ui.Layout.Stack
- Ui.Layout.Stretch
- Ui.Layout.Width
- Ui.Loading.Check
- Ui.Loading.Container
- Ui.Logic.If
- Ui.Logic.IfNot
- Ui.Optional.If
- Ui.Optional.IfNot
- Ui.Overlay.Background
- Ui.Overlay.Container
- Ui.Overlay.Item
- Ui.Overlay.ItemIf
- Ui.Popup.Container
- Ui.Popup.ShowIf
- Ui.Status.Container
- Ui.Status.Error
- Ui.Status.ErrorIf
- Ui.Status.Note
- Ui.Status.Success
- Ui.Theme.Set
- Ui.Theme.Variant
Types
Ui.Component.Data
A single UI component: a component name plus its attributes map, the generic node every Ui component emits.
Fields
| Field | Type | Description |
|---|---|---|
componentName | Text | The component kind, e.g. UiContentText or UiLayoutColumn. |
attributes | Collection.Map(Code.Language.Json.Value) | The component's attributes, keyed by name. |
Ui.Form.FieldResult
The result for one form field: its previous value and any validation error.
Fields
| Field | Type | Description |
|---|---|---|
optionalPreviousValue | Collection.Optional(Text) | The value last entered, if any. |
optionalError | Collection.Optional(Text) | The validation error for the field, if any. |
Ui.Form.Result
The outcome of a form: a status, a message, optional per-field results and an optional error code.
Fields
| Field | Type | Description |
|---|---|---|
statusType | Text | One of success, error, pending or empty. |
statusMessage | Text | Message shown to the user. |
optionalFields | Collection.Optional(Collection.Map(Ui.Form.FieldResult)) | Per-field results, keyed by field name. |
optionalErrorCode | Collection.Optional(Text) | Machine-readable error code, if any. |
Ui.Overlay.Item
One item bound for a named overlay container: its target name and its content tree.
Fields
| Field | Type | Description |
|---|---|---|
name | Text | The target container name, e.g. UiLoading or UiPopup. |
tree | Collection.Tree(Ui.Component.Data) | The overlay item's content tree. |
Ui.Theme.BackgroundStyle
A background style: gradient fill, border radius, colour and width, and inner padding.
Fields
| Field | Type | Description |
|---|---|---|
backgroundGradient | Ui.Theme.Gradient | The fill gradient. |
borderRadius | Maths.Real | Corner radius in pixels. |
borderColour | Colour | Border colour. |
borderSize | Maths.Real | Border width in pixels. |
padding | Maths.Real | Inner padding in pixels. |
Ui.Theme.Button
The styling for a button: its label text style and its background style.
Fields
| Field | Type | Description |
|---|---|---|
text | Ui.Theme.TextStyle | Text style for the label. |
background | Ui.Theme.BackgroundStyle | Background style for the button. |
Ui.Theme.Data
A complete theme: named variants, a default variant and optional nested-title styling.
Fields
| Field | Type | Description |
|---|---|---|
name | Text | The theme name, e.g. light or dark. |
variants | Collection.Map(Ui.Theme.Variant) | Variant name to variant styling. |
defaultVariantName | Text | The variant used when none is selected. |
optionalContentTitleNestedFont | Collection.Optional(Text) | Font for deeply nested titles. |
optionalContentTitleNestedPanelGradient | Collection.Optional(Ui.Theme.Gradient) | Gradient for nested titles under a panel. |
optionalContentTitleNestedMainGradient | Collection.Optional(Ui.Theme.Gradient) | Gradient for nested titles under a section. |
Ui.Theme.Gradient
A colour gradient: a primary colour and an optional second colour for a two-stop blend.
Fields
| Field | Type | Description |
|---|---|---|
colour1 | Colour | The primary colour. |
optionalColour2 | Collection.Optional(Colour) | The second colour, or none for a solid fill. |
Ui.Theme.InputStyle
The styling for a form input across normal and error states, plus label, error text and spacing.
Fields
| Field | Type | Description |
|---|---|---|
labelTextStyle | Ui.Theme.TextStyle | Style for the field label. |
fieldTextStyle | Ui.Theme.TextStyle | Field value style, normal state. |
fieldBackgroundStyle | Ui.Theme.BackgroundStyle | Field background, normal state. |
fieldErrorTextStyle | Ui.Theme.TextStyle | Field value style, error state. |
fieldErrorBackgroundStyle | Ui.Theme.BackgroundStyle | Field background, error state. |
errorTextStyle | Ui.Theme.TextStyle | Style for the error message. |
spacing | Maths.Real | Vertical spacing between parts. |
Ui.Theme.Style
A paired text and background style.
Fields
| Field | Type | Description |
|---|---|---|
text | Ui.Theme.TextStyle | Text styling. |
background | Ui.Theme.BackgroundStyle | Background styling. |
Ui.Theme.TextStyle
A text style: colour gradient, font, size and the bold, italic, underline, caps and alignment flags.
Fields
| Field | Type | Description |
|---|---|---|
gradient | Ui.Theme.Gradient | Text colour gradient. |
font | Text | Font family name. |
size | Maths.Real | Font size in pixels. |
allCaps | Logic.Maybe | Whether text is uppercased. |
underline | Logic.Maybe | Whether text is underlined. |
bold | Logic.Maybe | Whether text is bold. |
italic | Logic.Maybe | Whether text is italic. |
alignment | Text | Alignment: left, center or right. |
Ui.Theme.Variant
One theme variant: title and body text styles, child variant names, a background and spacing.
Fields
| Field | Type | Description |
|---|---|---|
titleStyle | Ui.Theme.TextStyle | Text style for titles and headings. |
textStyle | Ui.Theme.TextStyle | Text style for body text. |
variantNames | Collection.Map(Collection.Optional(Text)) | Child component keys to variant names. |
optionalBackgroundStyle | Collection.Optional(Ui.Theme.BackgroundStyle) | Background styling, or none. |
spacing | Maths.Real | Spacing between child elements, in pixels. |
Functions
Ui.Active.Disable
Marks its block disabled when the flag is yes.
Parameters
| Name | Type | Description |
|---|---|---|
disabledFlag | Logic.Maybe | When yes, descendants are disabled. |
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Active.Enable
Marks its block enabled when the flag is yes.
Parameters
| Name | Type | Description |
|---|---|---|
enabledFlag | Logic.Maybe | When yes, descendants are enabled. |
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Active.IsDisabled
Whether the surrounding region is currently disabled.
Returns
Returns Logic.Maybe — yes when the enclosing region is disabled.
Ui.Active.IsEnabled
Whether the surrounding region is currently enabled.
Returns
Returns Logic.Maybe — yes when the enclosing region is enabled.
Ui.Attribute
Adds a named attribute to the component currently being built.
Parameters
| Name | Type | Description |
|---|---|---|
name | Text | Attribute name. |
value | Code.Language.Json.Value | Attribute value. |
Returns
Returns nothing — records one attribute on the enclosing Ui.Component.
Ui.Button.Array.Insert
A button that inserts a value at an index of an array state.
Parameters
| Name | Type | Description |
|---|---|---|
arraySettable | Code.Language.Json.Value | The array state to update. |
insertIndex | Maths.Integer | Index to insert at. |
insertValue | Code.Language.Json.Value | The value to insert. |
Block
The button's label content.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Button.Array.Pop
A button that removes the last element of an array state.
Parameters
| Name | Type | Description |
|---|---|---|
arraySettable | Code.Language.Json.Value | The array state to update. |
Block
The button's label content.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Button.Array.Push
A button that appends a value to an array state.
Parameters
| Name | Type | Description |
|---|---|---|
arraySettable | Code.Language.Json.Value | The array state to update. |
pushValue | Code.Language.Json.Value | The value to append. |
Block
The button's label content.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Button.Array.Remove
A button that removes the element at an index of an array state.
Parameters
| Name | Type | Description |
|---|---|---|
arraySettable | Code.Language.Json.Value | The array state to update. |
removeIndex | Maths.Integer | Index to remove. |
Block
The button's label content.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Button.Array.Swap
A button that swaps two elements of an array state.
Parameters
| Name | Type | Description |
|---|---|---|
arraySettable | Code.Language.Json.Value | The array state to update. |
index | Maths.Integer | First index. |
withIndex | Maths.Integer | Second index. |
Block
The button's label content.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Button.Boolean.False
A button that sets a boolean state to no.
Parameters
| Name | Type | Description |
|---|---|---|
settable | Logic.Maybe | The boolean state to set. |
Block
The button's label content.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Button.Boolean.Toggle
A button that flips a boolean state between yes and no.
Parameters
| Name | Type | Description |
|---|---|---|
settable | Logic.Maybe | The boolean state to toggle. |
Block
The button's label content.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Button.Boolean.True
A button that sets a boolean state to yes.
Parameters
| Name | Type | Description |
|---|---|---|
settable | Logic.Maybe | The boolean state to set. |
Block
The button's label content.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Button.Disabled
A permanently disabled button.
Block
The button's label content.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Button.Integer.Add
A button that adds an amount to an integer state.
Parameters
| Name | Type | Description |
|---|---|---|
settable | Maths.Integer | The integer state to update. |
amount | Maths.Integer | The amount to add. |
Block
The button's label content.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Button.Integer.Decrement
A button that subtracts one from an integer state.
Parameters
| Name | Type | Description |
|---|---|---|
settable | Maths.Integer | The integer state to decrement. |
Block
The button's label content.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Button.Integer.Increment
A button that adds one to an integer state.
Parameters
| Name | Type | Description |
|---|---|---|
settable | Maths.Integer | The integer state to increment. |
Block
The button's label content.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Example
Ui.Button.Integer.Increment count
Ui.Content.Text "+"count on press.Ui.Button.Integer.Subtract
A button that subtracts an amount from an integer state.
Parameters
| Name | Type | Description |
|---|---|---|
settable | Maths.Integer | The integer state to update. |
amount | Maths.Integer | The amount to subtract. |
Block
The button's label content.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Button.Real.Add
A button that adds an amount to a real state.
Parameters
| Name | Type | Description |
|---|---|---|
settable | Maths.Real | The real state to update. |
amount | Maths.Real | The amount to add. |
Block
The button's label content.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Button.Real.Subtract
A button that subtracts an amount from a real state.
Parameters
| Name | Type | Description |
|---|---|---|
settable | Maths.Real | The real state to update. |
amount | Maths.Real | The amount to subtract. |
Block
The button's label content.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Button.Value.Setter
A button that sets a state cell to a value when pressed.
Parameters
| Name | Type | Description |
|---|---|---|
settable | Code.Language.Json.Value | The state cell to update on press. |
newValue | Code.Language.Json.Value | The value to assign on press. |
optionalDisabled | Collection.Optional(Logic.Maybe) | When yes, the button is disabled. |
Block
The button's label content.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Example
Ui.Button.Value.Setter mode "dark"
Ui.Content.Text "Dark mode"mode to "dark".Ui.Click.Setter
Makes its content set a state cell to a value when tapped.
Parameters
| Name | Type | Description |
|---|---|---|
settable | Code.Language.Json.Value | The state cell to update on press. |
newValue | Code.Language.Json.Value | The value to assign on tap. |
Block
The tappable content.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Component
Creates and emits a UI component, gathering attributes and children from its block.
Parameters
| Name | Type | Description |
|---|---|---|
componentName | Text | The component kind to emit. |
Block
The block, where Ui.Attribute calls and child components are gathered.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Content.Area
Wraps its block in a plain content area.
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Content.Icon
Shows a named icon inline.
Parameters
| Name | Type | Description |
|---|---|---|
iconName | Text | The icon name. |
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Content.Image
Shows an image at an optional size.
Parameters
| Name | Type | Description |
|---|---|---|
path | Text | Image path or URL. |
optionalWidth | Collection.Optional(Maths.Real) | Width in pixels, if fixed. |
optionalHeight | Collection.Optional(Maths.Real) | Height in pixels, if fixed. |
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Content.Panel
Wraps its block in a themed panel container.
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Content.Section
Wraps its block in a themed section container.
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Content.Text
Shows a run of body text, joining any extra fragments.
Parameters
| Name | Type | Description |
|---|---|---|
text | Text | The text to show. |
optionalText2 | Collection.Optional(Text) | Extra text run 2, if any. |
optionalText3 | Collection.Optional(Text) | Extra text run 3, if any. |
optionalText4 | Collection.Optional(Text) | Extra text run 4, if any. |
optionalText5 | Collection.Optional(Text) | Extra text run 5, if any. |
optionalText6 | Collection.Optional(Text) | Extra text run 6, if any. |
optionalText7 | Collection.Optional(Text) | Extra text run 7, if any. |
optionalText8 | Collection.Optional(Text) | Extra text run 8, if any. |
Returns
Returns nothing — emits the component into the surrounding UI tree.
Example
Ui.Content.Text "Hello, world"Ui.Content.Title
Shows a heading, joining any extra fragments.
Parameters
| Name | Type | Description |
|---|---|---|
text | Text | The text to show. |
optionalText2 | Collection.Optional(Text) | Extra text run 2, if any. |
optionalText3 | Collection.Optional(Text) | Extra text run 3, if any. |
optionalText4 | Collection.Optional(Text) | Extra text run 4, if any. |
optionalText5 | Collection.Optional(Text) | Extra text run 5, if any. |
optionalText6 | Collection.Optional(Text) | Extra text run 6, if any. |
optionalText7 | Collection.Optional(Text) | Extra text run 7, if any. |
optionalText8 | Collection.Optional(Text) | Extra text run 8, if any. |
Returns
Returns nothing — emits the component into the surrounding UI tree.
Example
Ui.Content.Title "Settings"Ui.Form
Opens a form bound to a result state, with submission handled by a reverse.
Parameters
| Name | Type | Description |
|---|---|---|
formDataState | Ui.Form.Result | The form's result state. |
submissionReverse | Ui.Form.Result | A reverse that receives the submitted result. |
Block
Two blocks: the form fields, then the submit content.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Example
Ui.Form result onSubmit
Ui.Form.Field.Text "name" "Name"
Ui.Form.Submit "Save"Ui.Form.Field
A form field with a custom input and validation block.
Parameters
| Name | Type | Description |
|---|---|---|
name | Text | The field's name in the form result. |
label | Text | The field label. |
Block
Two blocks: the input, which receives a valueBinding, then validation, which receives the optionalValue.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Form.Field.Checkbox
A checkbox form field.
Parameters
| Name | Type | Description |
|---|---|---|
name | Text | The field's name in the form result. |
label | Text | The field label. |
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Form.Field.Email
A email form field with an optional validation block.
Parameters
| Name | Type | Description |
|---|---|---|
name | Text | The field's name in the form result. |
label | Text | The field label. |
Block
Validation rules for the field, receiving the field's optionalValue.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Form.Field.Image
A image form field with an optional validation block.
Parameters
| Name | Type | Description |
|---|---|---|
name | Text | The field's name in the form result. |
label | Text | The field label. |
Block
Validation rules for the field, receiving the field's optionalValue.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Form.Field.Number
A number form field with an optional validation block.
Parameters
| Name | Type | Description |
|---|---|---|
name | Text | The field's name in the form result. |
label | Text | The field label. |
Block
Validation rules for the field, receiving the field's optionalValue.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Form.Field.OptionalNonEmptyString
Treats an empty string as absent, for optional field values.
Parameters
| Name | Type | Description |
|---|---|---|
value | Text | The value to normalise. |
Returns
Returns Collection.Optional(Text) — the value, or none when it is empty.
Ui.Form.Field.Password
A password form field with an optional validation block.
Parameters
| Name | Type | Description |
|---|---|---|
name | Text | The field's name in the form result. |
label | Text | The field label. |
Block
Validation rules for the field, receiving the field's optionalValue.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Form.Field.PhoneNumber
A phone number form field with an optional validation block.
Parameters
| Name | Type | Description |
|---|---|---|
name | Text | The field's name in the form result. |
label | Text | The field label. |
Block
Validation rules for the field, receiving the field's optionalValue.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Form.Field.ReadOnly
A read-only form field with an optional validation block.
Parameters
| Name | Type | Description |
|---|---|---|
name | Text | The field's name in the form result. |
label | Text | The field label. |
Block
Validation rules for the field, receiving the field's optionalValue.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Form.Field.Text
A text form field with an optional validation block.
Parameters
| Name | Type | Description |
|---|---|---|
name | Text | The field's name in the form result. |
label | Text | The field label. |
Block
Validation rules for the field, receiving the field's optionalValue.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Form.Field.Textarea
A multi-line text form field with an optional validation block.
Parameters
| Name | Type | Description |
|---|---|---|
name | Text | The field's name in the form result. |
label | Text | The field label. |
Block
Validation rules for the field, receiving the field's optionalValue.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Form.Submit
A submit button for the enclosing form.
Parameters
| Name | Type | Description |
|---|---|---|
label | Text | The button label. |
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Form.Validate.Integer.Max
Fails when the value is above a maximum.
Parameters
| Name | Type | Description |
|---|---|---|
optionalValue | Collection.Optional(Maths.Integer) | The value to check. |
maxValue | Maths.Integer | The largest allowed value. |
errorMessage | Text | Message shown on failure. |
Returns
Returns nothing — records the error on the field when the check fails.
Ui.Form.Validate.Integer.Min
Fails when the value is below a minimum.
Parameters
| Name | Type | Description |
|---|---|---|
optionalValue | Collection.Optional(Maths.Integer) | The value to check. |
minValue | Maths.Integer | The smallest allowed value. |
errorMessage | Text | Message shown on failure. |
Returns
Returns nothing — records the error on the field when the check fails.
Ui.Form.Validate.Integer.Positive
Fails when the value is not positive.
Parameters
| Name | Type | Description |
|---|---|---|
optionalValue | Collection.Optional(Maths.Integer) | The value to check. |
errorMessage | Text | Message shown on failure. |
Returns
Returns nothing — records the error on the field when the check fails.
Ui.Form.Validate.Real.Max
Fails when the value is above a maximum.
Parameters
| Name | Type | Description |
|---|---|---|
optionalValue | Collection.Optional(Maths.Real) | The value to check. |
maxValue | Maths.Real | The largest allowed value. |
errorMessage | Text | Message shown on failure. |
Returns
Returns nothing — records the error on the field when the check fails.
Ui.Form.Validate.Real.Min
Fails when the value is below a minimum.
Parameters
| Name | Type | Description |
|---|---|---|
optionalValue | Collection.Optional(Maths.Real) | The value to check. |
minValue | Maths.Real | The smallest allowed value. |
errorMessage | Text | Message shown on failure. |
Returns
Returns nothing — records the error on the field when the check fails.
Ui.Form.Validate.Real.Positive
Fails when the value is not positive.
Parameters
| Name | Type | Description |
|---|---|---|
optionalValue | Collection.Optional(Maths.Real) | The value to check. |
errorMessage | Text | Message shown on failure. |
Returns
Returns nothing — records the error on the field when the check fails.
Ui.Form.Validate.Required
Fails validation when the value is absent or empty.
Parameters
| Name | Type | Description |
|---|---|---|
optionalValue | Collection.Optional(Text) | The value to check. |
errorMessage | Text | Message shown on failure. |
Returns
Returns nothing — records the error on the field when the value is missing.
Ui.Form.Validate.String.ContainsOnly
Fails when the text has characters outside an allowed set.
Parameters
| Name | Type | Description |
|---|---|---|
optionalValue | Collection.Optional(Text) | The value to check. |
allowedChars | Text | The allowed characters. |
errorMessage | Text | Message shown on failure. |
Returns
Returns nothing — records the error on the field when the check fails.
Ui.Form.Validate.String.Email
Fails when the text is not a valid email address.
Parameters
| Name | Type | Description |
|---|---|---|
optionalValue | Collection.Optional(Text) | The value to check. |
errorMessage | Text | Message shown on failure. |
Returns
Returns nothing — records the error on the field when the check fails.
Ui.Form.Validate.String.MaxLength
Fails when the text is longer than a maximum length.
Parameters
| Name | Type | Description |
|---|---|---|
optionalValue | Collection.Optional(Text) | The value to check. |
maxLength | Maths.Integer | Maximum length. |
errorMessage | Text | Message shown on failure. |
Returns
Returns nothing — records the error on the field when the check fails.
Ui.Form.Validate.String.MinLength
Fails when the text is shorter than a minimum length.
Parameters
| Name | Type | Description |
|---|---|---|
optionalValue | Collection.Optional(Text) | The value to check. |
minLength | Maths.Integer | Minimum length. |
errorMessage | Text | Message shown on failure. |
Returns
Returns nothing — records the error on the field when the check fails.
Ui.Form.Validate.String.Pattern
Fails when the text does not match a pattern.
Parameters
| Name | Type | Description |
|---|---|---|
optionalValue | Collection.Optional(Text) | The value to check. |
pattern | Text | The pattern to match. |
errorMessage | Text | Message shown on failure. |
Returns
Returns nothing — records the error on the field when the check fails.
Ui.Icon.Add
Draws the built-in add icon.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Icon.Back
Draws the built-in back icon.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Icon.Blank
Draws the built-in blank icon.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Icon.Close
Draws the built-in close icon.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Icon.Delete
Draws the built-in delete icon.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Icon.Edit
Draws the built-in edit icon.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Icon.Forward
Draws the built-in forward icon.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Icon.Home
Draws the built-in home icon.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Icon.Icon
Draws a named icon.
Parameters
| Name | Type | Description |
|---|---|---|
iconName | Text | The icon name. |
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Icon.Profile
Draws the built-in profile icon.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Icon.Search
Draws the built-in search icon.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Icon.Settings
Draws the built-in settings icon.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Input.Checkbox
A checkbox input bound to a text state.
Parameters
| Name | Type | Description |
|---|---|---|
value | Text | The state cell the field reads and writes. |
optionalPlaceholder | Collection.Optional(Text) | Placeholder text, if any. |
optionalDisabled | Collection.Optional(Logic.Maybe) | When yes, the input is disabled. |
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Input.Frame
Wraps its block in the standard input frame styling.
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Input.Number
A number input bound to a real state.
Parameters
| Name | Type | Description |
|---|---|---|
value | Maths.Real | The real state the field reads and writes. |
optionalPlaceholder | Collection.Optional(Text) | Placeholder text, if any. |
optionalDisabled | Collection.Optional(Logic.Maybe) | When yes, the input is disabled. |
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Input.Password
A password input bound to a text state.
Parameters
| Name | Type | Description |
|---|---|---|
value | Text | The state cell the field reads and writes. |
optionalPlaceholder | Collection.Optional(Text) | Placeholder text, if any. |
optionalDisabled | Collection.Optional(Logic.Maybe) | When yes, the input is disabled. |
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Input.Text
A text input bound to a text state.
Parameters
| Name | Type | Description |
|---|---|---|
value | Text | The state cell the field reads and writes. |
optionalPlaceholder | Collection.Optional(Text) | Placeholder text, if any. |
optionalDisabled | Collection.Optional(Logic.Maybe) | When yes, the input is disabled. |
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Input.Textarea
A textarea input bound to a text state.
Parameters
| Name | Type | Description |
|---|---|---|
value | Text | The state cell the field reads and writes. |
optionalPlaceholder | Collection.Optional(Text) | Placeholder text, if any. |
optionalDisabled | Collection.Optional(Logic.Maybe) | When yes, the input is disabled. |
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Layout.Column
Lays out its block as a column.
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Layout.Grid
Lays out its block as a grid with a fixed column count.
Parameters
| Name | Type | Description |
|---|---|---|
columnCount | Maths.Integer | Number of columns. |
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Layout.Height
Constrains its block to a fixed height.
Parameters
| Name | Type | Description |
|---|---|---|
height | Maths.Real | Height in pixels. |
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Layout.Position
Offsets its block to a position within a stack.
Parameters
| Name | Type | Description |
|---|---|---|
x | Maths.Real | Horizontal offset in pixels. |
y | Maths.Real | Vertical offset in pixels. |
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Layout.Row
Lays out its block as a row.
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Layout.Scrollable
Lays out its block as a scrollable.
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Layout.Size
Constrains its block to a fixed width and height.
Parameters
| Name | Type | Description |
|---|---|---|
width | Maths.Real | Width in pixels. |
height | Maths.Real | Height in pixels. |
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Layout.Stack
Lays out its block as a stack.
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Layout.Stretch
Lays out its block as a stretch.
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Layout.Width
Constrains its block to a fixed width.
Parameters
| Name | Type | Description |
|---|---|---|
width | Maths.Real | Width in pixels. |
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Loading.Check
Shows the loading overlay while a value is still resolving.
Parameters
| Name | Type | Description |
|---|---|---|
value | Code.Language.Json.Value | The value whose lock state is checked. |
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Loading.Container
Marks its block as the region a loading overlay covers.
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Logic.If
Runs its block only when the condition is yes, keeping lock state for loading.
Parameters
| Name | Type | Description |
|---|---|---|
condition | Logic.Maybe | The condition to test. |
Block
The content shown when condition is yes.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Example
Ui.Logic.If loggedIn
Ui.Content.Text "Welcome back"loggedIn is yes.Ui.Logic.IfNot
Runs its block only when the condition is no.
Parameters
| Name | Type | Description |
|---|---|---|
condition | Logic.Maybe | The condition to test. |
Block
The content shown when condition is no.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Optional.If
Runs its block with the unwrapped value when the optional is present.
Parameters
| Name | Type | Description |
|---|---|---|
optionalValue | Collection.Optional(T) | The optional value to test. |
Block
The content run when the value is present; the block receives the unwrapped value.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Optional.IfNot
Runs its block when the optional is absent.
Parameters
| Name | Type | Description |
|---|---|---|
optionalValue | Collection.Optional(T) | The optional value to test. |
Block
The content run when the value is absent.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Overlay.Background
Shows a dimmed overlay backdrop when visible is yes.
Parameters
| Name | Type | Description |
|---|---|---|
visible | Logic.Maybe | When yes, the backdrop is shown. |
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Overlay.Container
Opens a named overlay container that gathers matching items.
Parameters
| Name | Type | Description |
|---|---|---|
name | Text | The container name. |
Block
The container's base content; overlay items target it by name.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Overlay.Item
Sends its block to the named overlay container.
Parameters
| Name | Type | Description |
|---|---|---|
name | Text | The target container name. |
Block
The overlay item content.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Overlay.ItemIf
Sends its block to a container only while visible is yes.
Parameters
| Name | Type | Description |
|---|---|---|
name | Text | The target container name. |
visible | Logic.Maybe | When yes, the item is shown. |
Block
The overlay item content.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Popup.Container
Marks its block as the region popups render over.
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Popup.ShowIf
Shows a popup dialog while a state is yes.
Parameters
| Name | Type | Description |
|---|---|---|
showState | Logic.Maybe | When yes, the popup is shown. |
Block
Two blocks: the popup header, then its body content.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Status.Container
Marks its block as a status region.
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Status.Error
Shows its block styled as an error.
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Status.ErrorIf
Shows its block styled as an error only when the condition is yes.
Parameters
| Name | Type | Description |
|---|---|---|
condition | Logic.Maybe | When yes, the error is shown. |
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Status.Note
Shows its block styled as an informational note.
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Status.Success
Shows its block styled as a success.
Block
A block of nested content run inside this component.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Theme.Set
Applies a theme to its block.
Parameters
| Name | Type | Description |
|---|---|---|
theme | Ui.Theme.Data | The theme to apply. |
Block
The content the theme applies to.
Returns
Returns nothing — emits the component into the surrounding UI tree.
Ui.Theme.Variant
Switches to a named variant of the current theme for its block.
Parameters
| Name | Type | Description |
|---|---|---|
variantName | Text | The variant name to use. |
Block
The content the variant applies to.
Returns
Returns nothing — emits the component into the surrounding UI tree.