Text Input: Reference
Reference for Text Input in Web Framework References. Key properties: ID, Class, Name, Type.
Bootstrap 5 component. Add the component and configure its properties in the Inspector.
Inspector Property Groups
Text Input Properties
| Property | Type | Details |
|---|---|---|
| ID | text | Optional unique identifier for this element. Sets the element's id attribute. Keep IDs unique per page (useful for anchors, label for targets, and JavaScript hooks). Bootstrap docs: Introduction Attribute: id |
| Class | text | Adds raw class names to the element. Adds text directly to the class attribute. Use this for custom utility classes or project-specific overrides. Separate multiple classes with spaces. Bootstrap docs: Utilities API Attribute: class |
| Name | text | HTML name attribute. Sets the control name . This is used as the field key in form submissions and is essential for classic post submissions and many server-side handlers. Bootstrap docs: Forms overview Attribute: name |
| Type | droplist | HTML input type. Controls the underlying <input type="..."> used by the form control. Choose a type that matches the expected value (e.g. email , number , password ) for better validation and mobile keyboards. Bootstrap docs: Form control Attribute: type Options: text, hidden, color, date, datetime-local, time |
| Placeholder | text | Placeholder text. Sets the placeholder text shown when the input is empty. Do not use placeholders as a replacement for labels; use them as examples or hints. Bootstrap docs: Form control Attribute: placeholder |
| Static Value | text | Initial/default value. Sets the control initial value. For App Connect, you often bind values reactively instead of hardcoding them. Bootstrap docs: Form control Attribute: value |
Spacing
| Property | Type | Details |
|---|---|---|
| Margin<br>&<br>Padding | spacing | |
| X Gutter | range | Horizontal gutter size. Sets the horizontal gutter (spacing between columns). Uses gx-* utilities to control the horizontal gutter size. Bootstrap docs: Gutters |
| Y Gutter | range | Vertical gutter size. Sets the vertical gutter (spacing between rows). Uses gy-* utilities to control the vertical gutter size. Bootstrap docs: Gutters |
Display
| Property | Type | Details |
|---|---|---|
| Hide on | button_group | Options: xs, sm, md, lg, xl, xxl |
| button_group | ||
| Visually Hidden | boolean | |
| Focusable | boolean |