Input

A component that takes text input.

Properties

Color, Variant, AppearanceOverride

Use the Color, Variant and AppearanceOverride properties to style the component.

Available colors are amber, blue, cyan, emerald, fuchsia, green, indigo, lime, neutral, orange, pink, purple, red, rose, sky, slate, stone, teal, violet, yellow, zinc, gray. Available variants differ per color and can be viewed in the UI demo below.

The theme data for the component can be found in the Theming section and can be overwritten through AppearanceOverride.

Pass Color and Variant as a string and AppearanceOverride as an optionalColorTable. More information on overrides can be found here.

Tailwind Color

default

Code block has not loaded. An error may have occurred.

Disabled

Type

Code block has not loaded. An error may have occurred.

Placeholder

Type

Code block has not loaded. An error may have occurred.

Icon

Type

Code block has not loaded. An error may have occurred.

TrailingIcon

Type

Code block has not loaded. An error may have occurred.

Text

One-way Value

The text that should be set. This is a one-way property. For input validation, call text:set(value, true) to overwrite the existing text.

Type

Code block has not loaded. An error may have occurred.

TextSize

Type

Code block has not loaded. An error may have occurred.

TextXAlignment

Type

Code block has not loaded. An error may have occurred.

TextYAlignment

Type

Code block has not loaded. An error may have occurred.

BlockMouseIcon

Type

Code block has not loaded. An error may have occurred.

OnTextChanged

Type

Code block has not loaded. An error may have occurred.

OnFocus

Type

Code block has not loaded. An error may have occurred.

OnFocusLost

Type

Code block has not loaded. An error may have occurred.

Instance Properties

This instance takes all the properties of a Frame. SpecialKeys, such as fusion.Children will also be passed to the instance.

Slots

Slots allow you to customize specific aspects of the component completely, often replacing the old instances. Slots are passed parameters that allow the slot to interact with component data that is normally not exposed. Generally, an useColor (the function passed by theme:get()) function is passed as first parameter to allow the new components to use the same color as the parent component. When using slots, make sure to wrap any code that uses reactive values in a Computed (or any other classes that isolate state), to prevent unnecessary updates.

Left

A slot for the left side of the input, where an icon would normally be placed.

Function Type

Code block has not loaded. An error may have occurred.

Right

A slot for the right side of the input, where a trailing icon would normally be placed.

Function Type

Code block has not loaded. An error may have occurred.

Theming

States

State	Description
Base
Hover
Focus
Disabled

Colors

Color	Description
Placeholder
Text
Stroke
Background