Input
A component that takes text input.
Properties
Color
, Variant
, AppearanceOverride
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.
Disabled
Disabled
Type
Code block has not loaded. An error may have occurred.
Placeholder
Placeholder
Type
Code block has not loaded. An error may have occurred.
Icon
Icon
Type
Code block has not loaded. An error may have occurred.
TrailingIcon
TrailingIcon
Type
Code block has not loaded. An error may have occurred.
Text
Text
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
TextSize
Type
Code block has not loaded. An error may have occurred.
TextXAlignment
TextXAlignment
Type
Code block has not loaded. An error may have occurred.
TextYAlignment
TextYAlignment
Type
Code block has not loaded. An error may have occurred.
BlockMouseIcon
BlockMouseIcon
Type
Code block has not loaded. An error may have occurred.
OnTextChanged
OnTextChanged
Type
Code block has not loaded. An error may have occurred.
OnFocus
OnFocus
Type
Code block has not loaded. An error may have occurred.
OnFocusLost
OnFocusLost
Type
Code block has not loaded. An error may have occurred.
Instance Properties
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 |