Input Text
The Avonni Text Input component is a standard single-line text field for capturing user-entered strings. Use it whenever you need to collect free-form text — names, search terms, short answers — with optional length constraints, pattern validation, and customizable error messages.
Overview
To start with the Text Input component, drop it onto the canvas and configure its label, default value, and any validation rules through the properties panel.
Configuration
To configure the Text Input, select it on the canvas. The Edit Text Input panel opens on the right. The sections below mirror the Properties tab.
Properties
Label
The text label displayed above the input field to identify its purpose to the user.
Value
Pre-populates the field with a default value when the page loads.
Field Level Help
Adds a help icon next to the label. When users hover over or click the icon, the text you enter here appears as a tooltip to explain the field's purpose.
Variant
Controls how the label is positioned relative to the input field. Default: Standard.
Standard
Label appears above the input field.
Label Hidden
Label is hidden visually but remains accessible to screen readers.
Label Inline
Label appears to the left of the input field on the same line.
Label Stacked
Label floats above the field when the field is focused or has a value.
Placeholder
Ghost text shown inside the empty field to guide users on what to enter. Disappears once the user starts typing.
Autocomplete
When enabled, allows the browser to suggest previously entered values for the field.
Maximum Length
The maximum number of characters a user can enter. Leave blank for no limit.
Message When Too Long
Custom error message shown when the entered value exceeds the Maximum Length. Requires Maximum Length to be set.
Minimum Length
The minimum number of characters required in the field.
Message When Too Short
Custom error message shown when the entered value is shorter than Minimum Length. Requires Minimum Length to be set.
Pattern
A regular expression the entered value must match to be considered valid. For example, [A-Z]{3} requires exactly three uppercase letters.
Message When Pattern Mismatch
Custom error message shown when the value does not match the Pattern. Requires Pattern to be set.
Required
When enabled, the field must be filled in before the record or flow can be submitted. A red asterisk is displayed next to the label.
Message When Value Missing
Custom error message shown when the field is left empty and Required is enabled. Requires Required to be enabled.
Disabled
When enabled, the field is rendered but users cannot interact with it. Useful for displaying values that should not be changed in the current context.
Read Only (Advanced)
When enabled, the field displays its value but cannot be edited. Unlike Disabled, the value is still submitted with the form.
Message When Bad Input (Advanced)
Custom error message shown when the browser detects that the entered value is not a valid text string.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Interactions
Interactions define what happens when users interact with the Text Input. Configure them from the Interactions tab of the Edit Text Input panel.
Change
Fires whenever the value in the field changes. Use this to drive other components or logic — for example, filtering a list as the user types, or enabling a submit button once the field has a value.
Styling
Configure the Input Text's appearance from the Style tab of the Edit Input Text panel.
Controls the outer spacing around the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the component's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Controls the component's dimensions.
Width / Height: Set fixed dimensions.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Overflow: Control how content that exceeds the bounds is handled.
Customizes the border surrounding the component.
Color / Size / Style / Radius: Set the border color, thickness, style, and corner rounding.
Styles the field label.
Text Color / Font Size / Font Style / Font Weight: Set the label color and typography.
Styles the input field.
Background Color / Text Color / Border Color / Border Radius: Set the input colors and corner rounding.
Spacing Horizontal Start / Spacing Horizontal End: Set the inner horizontal spacing.
Last updated
Was this helpful?