OptionalboxModel: Partial<BoxModel>ProtectedboxThe box model defining this component's sizing and spacing
ProtectedcomputedThe computed layout after measurement and positioning
The PIXI container that holds this component's visual representation
Whether this component is enabled for interaction
ProtectedfocusedInternal focus state
Protected OptionalfocusFocus ring for visual focus indication
Protected OptionalfontFont configuration for this component. Children inherit these settings (like CSS font inheritance). Set via setFontConfig() and resolved via getInheritedFont* methods.
ProtectedhoveredHover state (for components that track hover)
ReadonlyidUnique identifier for this component in the layout tree
Protected OptionallayoutLayout configuration for this component. Children inherit these defaults unless overridden.
ProtectedlayoutFlag indicating if layout needs to be recalculated
ProtectedlayoutLayout engine service for calculating layouts Initialized in base class so all components have access to layout calculations
OptionalparentReference to parent component (if any)
ProtectedpressedPressed state (for components that track press)
Tab index for focus order (-1 means not focusable by tab)
Protected OptionalthemeOptional theme resolver for color resolution Components can set this to enable automatic theming
Whether this component is currently visible
Get the layout node (IFlexLayoutParticipant)
Gets the x position of this component
Sets the x position of this component
Gets the y position of this component
Sets the y position of this component
Apply computed layout from the flex layout engine. Called after layout computation completes.
Updates both the internal computedLayout and PIXI container position.
The computed layout values
Whether this component can receive focus
Cleanup when destroying
Gets the box model of this component
Gets the font configuration for this component. Returns local config if set, otherwise undefined.
Gets the global bounds of this component (position relative to stage)
Gets the current height
ProtectedgetGets the inherited font family (convenience method).
OptionallocalOverride: stringOptional local override
ProtectedgetGets the inherited font size (convenience method).
OptionallocalOverride: numberOptional local override
ProtectedgetProtectedgetGets the inherited text color (convenience method).
OptionallocalOverride: numberOptional local override
Gets the computed layout of this component
Gets the layout configuration for this component.
ProtectedgetGet theme resolver (creates default if none provided)
Gets the current value
Gets the current width
Hides this component
ProtectedhideHides the focus ring
Whether this component is currently focused
Performs layout for this input
ProtectedmakeHelper to make container interactive with common settings Components can call this in setupInteractivity() or override for custom behavior
Cursor type ('pointer', 'text', 'default', etc.)
Marks this component's layout as dirty, requiring recalculation
Measures the size needed for this input
Measure the intrinsic content size of this component. Called by the flex layout engine during Pass 2 (measure).
Override in subclasses that have intrinsic content size. For containers that size based on children, return { width: 0, height: 0 }.
The content size in pixels
Called when input loses focus
Called when input receives focus
ProtectedrenderRenders the input
ProtectedresolveResolve checkmark color with optional override
Optionaloverride: numberProtectedresolveResolve a color from theme with optional override Simplifies color resolution across all components
Optionaloverride: numberProtectedresolveResolve a control-specific color with optional override
Optionaloverride: numberProtectedresolveResolves a font setting by walking up the parent chain. Like CSS inheritance - returns local value if set, otherwise inherits from parent.
The font config key to resolve
OptionallocalOverride: UIFontConfig[K]Optional local override value
The resolved value or undefined
ProtectedresolveResolves a layout setting by walking up the parent chain. Allows components to adapt to their context (e.g. using parent's default padding).
The resolved value or undefined
ProtectedresolveResolve placeholder color with optional override
Optionaloverride: numberProtectedresolveResolve text color with optional override
Optionaloverride: numberSets align-self property
Sets flex properties for this component
Sets flex basis
Sets flex grow factor
Sets flex shrink factor
Sets font configuration for this component. Children will inherit these settings (like CSS).
Sets layout configuration for this component. Children will inherit these settings.
Sets the position of this component
Sets the size of the input and redraws
New width in pixels
Optionalheight: numberNew height in pixels (optional, keeps current if not provided)
Sets the value programmatically without triggering onChange. Use this when setting value from external state (e.g., parent component).
Sets the width of the input
Shows this component
ProtectedshowShows the focus ring
Sync BoxModel properties to the layout node's style. Called when BoxModel changes to keep the layout system in sync.
ProtectedupdateUpdates the focus ring appearance based on component size. Uses theme colors for consistent styling.
Update value (for controlled mode)
A text input component following Ant Design patterns Supports both controlled and uncontrolled modes
Example