UI.Input

The author-facing constructor table combines a required semantic id, ordered UI.Node children and typed optional properties. Runtime validation additionally checks whether each property and child is supported by the selected component.

Mental model

This is a declarative node: app.render describes it again from current state, while the host matches its stable id to the existing view.

Before you use it

Add luastra/ui to this module's dependencies in luastra.json, then import it with require("luastra/ui"). The project must declare the ui.render capability. app.render must return one UI.Screen root; place this node inside that tree rather than invoking it for a hidden side effect.

How it fits

This type exists during Luau analysis and documents values used by UI constructors or app.render. It is erased from the runtime bundle as a static type.

Fields or definition

Children and layout

This component does not accept arbitrary child nodes; named parameters provide its content.

Accessibility and keyboard

A stable id, logical render-tree order, and visible labels preserve predictable keyboard and screen-reader navigation.

Common mistakes

• Using a duplicate id or an uppercase path segment.
• Passing a shared-group parameter that is not listed on this component page.

Returns

UI.Node — a declarative node in the new render tree.

What happens next

A checked annotation that matches the exact exported declaration.

Failures and fixes

If the annotation fails, compare the value with the exact declaration and the producing or consuming function.

Availability

Source API in 0.5.0-alpha; the public installer targets 0.5.0-alpha. Verify host-specific behavior against the selected SDK.

Exact declaration

export type Input = {
    [number]: Node,
    id: string,
    accentColor: string?,
    align: string?,
    appearance: string?,
    aspectRatio: number?,
    autoComplete: string?,
    backgroundColor: string?,
    busy: boolean?,
    className: string?,
    code: string?,
    columns: string?,
    cornerRadius: number?,
    count: number?,
    dangerColor: string?,
    depth: number?,
    decorative: boolean?,
    description: string?,
    descriptionId: string?,
    disabled: boolean?,
    documentDescription: string?,
    documentLanguage: string?,
    documentTitle: string?,
    enterKeyHint: string?,
    endBusy: boolean?,
    estimatedItemSize: number?,
    errorId: string?,
    external: boolean?,
    fill: string?,
    fit: string?,
    flow: string?,
    gap: string?,
    header: boolean?,
    height: number?,
    hidden: boolean?,
    href: string?,
    icon: string?,
    initialFocus: string?,
    inputMode: string?,
    inputType: string?,
    itemCount: number?,
    itemOffset: number?,
    justify: string?,
    label: string?,
    language: string?,
    layerState: string?,
    margin: string?,
    marginBottom: string?,
    marginEnd: string?,
    marginStart: string?,
    marginTop: string?,
    marginX: string?,
    marginY: string?,
    maxVisible: number?,
    maximumLength: number?,
    mode: string?,
    multiline: boolean?,
    motion: unknown,
    mutedColor: string?,
    nodeKind: string?,
    onDismiss: string?,
    onEndReached: string?,
    onInput: string?,
    onSubmit: string?,
    onStartReached: string?,
    onTap: string?,
    open: boolean?,
    orbitMotion: string?,
    orbitTheme: string?,
    overscan: number?,
    overflow: string?,
    padding: string?,
    paddingBottom: string?,
    paddingEnd: string?,
    paddingStart: string?,
    paddingTop: string?,
    paddingX: string?,
    paddingY: string?,
    placeholder: (string | Assets.Image)?,
    placeholderColor: string?,
    presentation: string?,
    pressed: boolean?,
    priority: number?,
    query: string?,
    relatedTo: { string }?,
    required: boolean?,
    responsive: boolean?,
    resultCount: number?,
    ring: number?,
    role: string?,
    scope: string?,
    scroll: string?,
    selected: boolean?,
    shape: string?,
    signalIcon: string?,
    source: (string | Assets.Image | Content.Image)?,
    onError: string?,
    onLoad: string?,
    status: string?,
    statusTone: string?,
    startBusy: boolean?,
    sticky: string?,
    stroke: string?,
    strokeWidth: number?,
    successColor: string?,
    surface: string?,
    surfaceColor: string?,
    text: string?,
    textStyle: TextStyle?,
    textAlign: string?,
    textColor: string?,
    theme: Theme?,
    title: string?,
    tone: string?,
    totalCount: number?,
    value: string?,
    variant: string?,
    warningColor: string?,
    width: (string | number)?,
}

Continue learning

Complete inventory