Docs/Presentations/TextInput

TextInput

Presentations v1.0 zero-schema

No description provided.

Missing descriptions: TextDecoration.

Required fields

PresentationType Name

Properties

PresentationType string required

A text input allows users to enter text. It's commonly used in forms, search bars, chat applications, and more.

Allowed TextInput

Name string required

A unique identifier for the text input.

InitialValue string optional

The initial value of the input.

BackgroundColor optional

The color used to indicate errors in the input

Default "#FFFFFF"

IsJson boolean optional

Indicates whether the text input should be parsed as JSON data.

Default false

Padding number, object optional

The space between the text input's content and its border. Accepts a number for all sides, or an LTRB object ({"Top": …, "Left": …, "Right": …, "Bottom": …}). Responsive value maps are NOT supported here and resolve to zero.

FontSize number, object optional

The size of the text inside the input in pixels. Accepts a responsive value map ({"sm": …, "md": …, "lg": …}).

Default 16

HintText string optional

The text displayed in the input when it's empty to guide the user

IsNumber boolean optional

Specifies whether the input should accept only numeric values.

Default false

MaxLines number, object optional

The maximum number of lines of text the input can display. Accepts a responsive value map ({"sm": …, "md": …, "lg": …}).

Default 1

OnChange composed optional

A function called when the input's value changes.

Ref Actions / Action / 1.0

OnSubmit composed optional

A function called when the user submits the input (e.g., presses Enter).

Ref Actions / Action / 1.0

AutoFocus boolean optional

Determines whether the input should be focused automatically when the screen loads.

Default false

AutoSubmit boolean optional

Specifies whether the form should be submitted automatically after the input is complete.

Default false

ErrorColor string, object optional

The color used to indicate errors in the input. Accepts a color name, the "primary" token, a #hex string, or a gradient object ({"Colors": [...], "Type": "Linear"|"Radial"|"Sweep"}).

Default "#FF0000"

IsRequired boolean optional

Indicates whether the input is required to be filled out.

Default false

AutoCorrect boolean optional

Specifies whether autocorrection should be applied to the input.

Default false

ObscureText boolean optional

Specifies whether the text entered in the input should be hidden (e.g., for passwords).

Default false

DisplayText string optional

The initial value displayed in the input.

BorderRadius number, object optional

The radius of the border corners of the input to make it rounded. Accepts a responsive value map ({"sm": …, "md": …, "lg": …}).

BorderColor string, object optional

The color of the input's border accepting color name or hex value. Accepts a color name, the "primary" token, a #hex string, or a gradient object ({"Colors": [...], "Type": "Linear"|"Radial"|"Sweep"}).

Default "#000000"

BorderWidth number, object optional

The width of Input border in pixels. Accepts a responsive value map ({"sm": …, "md": …, "lg": …}).

Default 1

DefaultColor string, object optional

The default color of text in input accepting color name or hex value. Accepts a color name, the "primary" token, a #hex string, or a gradient object ({"Colors": [...], "Type": "Linear"|"Radial"|"Sweep"}).

Default "#000000"

FontFamily string optional

The font family used for the text in the input.

Default "DefaultUI"

Allowed DefaultUI DefaultMonospace Google:Inter Google:Roboto Google:Open Sans Google:Lato Google:Montserrat Google:Poppins Google:Nunito Google:Nunito Sans Google:Raleway Google:Work Sans Google:Rubik Google:Karla Google:Manrope Google:DM Sans Google:Outfit Google:Sora Google:Space Grotesk Google:Plus Jakarta Sans Google:Barlow Google:Cabin Google:Ubuntu Google:PT Sans Google:Fira Sans Google:Josefin Sans Google:Quicksand Google:Archivo Google:Noto Sans Google:Merriweather Google:Playfair Display Google:Lora Google:PT Serif Google:EB Garamond Google:Libre Baskerville Google:Crimson Text Google:Roboto Slab Google:Zilla Slab Google:Noto Serif Google:Oswald Google:Bebas Neue Google:Anton Google:Pacifico Google:Dancing Script Google:Caveat Google:Comfortaa Google:Righteous Google:Fira Code Google:JetBrains Mono Google:Roboto Mono Google:Source Code Pro Google:Space Mono Google:Inconsolata Google:Mukta Google:Hind Google:Noto Sans Devanagari

FontWeight number, object optional

The weight of the font used for the text in the input. Accepts a responsive value map ({"sm": …, "md": …, "lg": …}).

Default 400

Color string, object optional

The color of the text in the input. Accepts a color name, the "primary" token, a #hex string, or a gradient object ({"Colors": [...], "Type": "Linear"|"Radial"|"Sweep"}).

Default "#000000"

TextShadow array optional

A shadow effect applied to the text in the input.

TextAlign string optional

The alignment of the text in the input.

Default "Left"

Allowed Left Center Right Justify

ReadOnly boolean optional

Specifies whether the input is read-only.

Default false

TextOverflow string optional

The strategy for handling text overflow in the input.

Allowed Left Center Right Justify

TextDecoration string optional

No description

Default "The decoration applied to the text in the input."

Allowed Left Right

Height number, object optional

The height of the input in pixels. Accepts a responsive value map ({"sm": …, "md": …, "lg": …}).

DisplayTextHorizontal boolean optional

Specifies whether the display text should be horizontally displayed.

Default false

DisplayTextWidth number, object optional

The width of the display text in pixels. Accepts a responsive value map ({"sm": …, "md": …, "lg": …}).

Default 100

LabelWidth number, object optional

The width of the input's label in pixels. Accepts a responsive value map ({"sm": …, "md": …, "lg": …}).

Default 100

FocusedColor string, object optional

The color of the text when the input is focused. Accepts a color name, the "primary" token, a #hex string, or a gradient object ({"Colors": [...], "Type": "Linear"|"Radial"|"Sweep"}).

InputValidationRegex string optional

A regular expression used to validate the input.

InputValidationErrorMessage string optional

The error message displayed when the input fails validation.

Referenced contracts

Actions / Action / 1.0 raw

{ "$id": "/schema/Presentations/TextInput/1.0/index.json", "type": "object", "title": "TextInput", "$schema": "http://json-schema.org/draft-07/schema#", "required": [ "PresentationType", "Name" ], "properties": { "PresentationType": { "enum": [ "TextInput" ], "type": "string", "description": " A text input allows users to enter text. It's commonly used in forms, search bars, chat applications, and more." }, "Name": { "type": "string", "description": "A unique identifier for the text input." }, "InitialValue": { "type": "string", "description": "The initial value of the input." }, "BackgroundColor": { "description": "The color used to indicate errors in the input", "default": "#FFFFFF", "x-editor": "color" }, "IsJson": { "type": "boolean", "description": "Indicates whether the text input should be parsed as JSON data.", "default": false }, "Padding": { "anyOf": [ { "type": "number" }, { "type": "object" } ], "description": "The space between the text input's content and its border. Accepts a number for all sides, or an LTRB object ({\"Top\": …, \"Left\": …, \"Right\": …, \"Bottom\": …}). Responsive value maps are NOT supported here and resolve to zero.", "type": [ "number", "object" ] }, "FontSize": { "type": [ "number", "object" ], "description": "The size of the text inside the input in pixels. Accepts a responsive value map ({\"sm\": …, \"md\": …, \"lg\": …}).", "default": 16 }, "HintText": { "type": "string", "description": "The text displayed in the input when it's empty to guide the user" }, "IsNumber": { "type": "boolean", "description": "Specifies whether the input should accept only numeric values.", "default": false }, "MaxLines": { "type": [ "number", "object" ], "description": "The maximum number of lines of text the input can display. Accepts a responsive value map ({\"sm\": …, \"md\": …, \"lg\": …}).", "default": 1 }, "OnChange": { "description": "A function called when the input's value changes.", "allOf": [ { "$ref": "/schema/Actions/Action/1.0/index.json" } ] }, "OnSubmit": { "description": "A function called when the user submits the input (e.g., presses Enter).", "allOf": [ { "$ref": "/schema/Actions/Action/1.0/index.json" } ] }, "AutoFocus": { "type": "boolean", "description": "Determines whether the input should be focused automatically when the screen loads.", "default": false }, "AutoSubmit": { "type": "boolean", "description": "Specifies whether the form should be submitted automatically after the input is complete.", "default": false }, "ErrorColor": { "type": [ "string", "object" ], "description": "The color used to indicate errors in the input. Accepts a color name, the \"primary\" token, a #hex string, or a gradient object ({\"Colors\": [...], \"Type\": \"Linear\"|\"Radial\"|\"Sweep\"}).", "default": "#FF0000", "x-editor": "color" }, "IsRequired": { "type": "boolean", "description": "Indicates whether the input is required to be filled out.", "default": false }, "AutoCorrect": { "type": "boolean", "description": "Specifies whether autocorrection should be applied to the input.", "default": false }, "ObscureText": { "type": "boolean", "description": " Specifies whether the text entered in the input should be hidden (e.g., for passwords).", "default": false }, "DisplayText": { "type": "string", "description": "The initial value displayed in the input." }, "BorderRadius": { "type": [ "number", "object" ], "description": "The radius of the border corners of the input to make it rounded. Accepts a responsive value map ({\"sm\": …, \"md\": …, \"lg\": …})." }, "BorderColor": { "type": [ "string", "object" ], "description": "The color of the input's border accepting color name or hex value. Accepts a color name, the \"primary\" token, a #hex string, or a gradient object ({\"Colors\": [...], \"Type\": \"Linear\"|\"Radial\"|\"Sweep\"}).", "default": "#000000", "x-editor": "color" }, "BorderWidth": { "type": [ "number", "object" ], "description": "The width of Input border in pixels. Accepts a responsive value map ({\"sm\": …, \"md\": …, \"lg\": …}).", "default": 1 }, "DefaultColor": { "type": [ "string", "object" ], "description": "The default color of text in input accepting color name or hex value. Accepts a color name, the \"primary\" token, a #hex string, or a gradient object ({\"Colors\": [...], \"Type\": \"Linear\"|\"Radial\"|\"Sweep\"}).", "default": "#000000", "x-editor": "color" }, "FontFamily": { "type": "string", "description": "The font family used for the text in the input.", "default": "DefaultUI", "enum": [ "DefaultUI", "DefaultMonospace", "Google:Inter", "Google:Roboto", "Google:Open Sans", "Google:Lato", "Google:Montserrat", "Google:Poppins", "Google:Nunito", "Google:Nunito Sans", "Google:Raleway", "Google:Work Sans", "Google:Rubik", "Google:Karla", "Google:Manrope", "Google:DM Sans", "Google:Outfit", "Google:Sora", "Google:Space Grotesk", "Google:Plus Jakarta Sans", "Google:Barlow", "Google:Cabin", "Google:Ubuntu", "Google:PT Sans", "Google:Fira Sans", "Google:Josefin Sans", "Google:Quicksand", "Google:Archivo", "Google:Noto Sans", "Google:Merriweather", "Google:Playfair Display", "Google:Lora", "Google:PT Serif", "Google:EB Garamond", "Google:Libre Baskerville", "Google:Crimson Text", "Google:Roboto Slab", "Google:Zilla Slab", "Google:Noto Serif", "Google:Oswald", "Google:Bebas Neue", "Google:Anton", "Google:Pacifico", "Google:Dancing Script", "Google:Caveat", "Google:Comfortaa", "Google:Righteous", "Google:Fira Code", "Google:JetBrains Mono", "Google:Roboto Mono", "Google:Source Code Pro", "Google:Space Mono", "Google:Inconsolata", "Google:Mukta", "Google:Hind", "Google:Noto Sans Devanagari" ] }, "FontWeight": { "type": [ "number", "object" ], "description": "The weight of the font used for the text in the input. Accepts a responsive value map ({\"sm\": …, \"md\": …, \"lg\": …}).", "default": 400 }, "Color": { "type": [ "string", "object" ], "description": "The color of the text in the input. Accepts a color name, the \"primary\" token, a #hex string, or a gradient object ({\"Colors\": [...], \"Type\": \"Linear\"|\"Radial\"|\"Sweep\"}).", "default": "#000000", "x-editor": "color" }, "TextShadow": { "type": "array", "description": "A shadow effect applied to the text in the input." }, "TextAlign": { "enum": [ "Left", "Center", "Right", "Justify" ], "type": "string", "description": "The alignment of the text in the input.", "default": "Left" }, "ReadOnly": { "type": "boolean", "description": "Specifies whether the input is read-only.", "default": false }, "TextOverflow": { "enum": [ "Left", "Center", "Right", "Justify" ], "type": "string", "description": "The strategy for handling text overflow in the input." }, "TextDecoration": { "enum": [ "Left", "Right" ], "type": "string", "default": "The decoration applied to the text in the input." }, "Height": { "type": [ "number", "object" ], "description": "The height of the input in pixels. Accepts a responsive value map ({\"sm\": …, \"md\": …, \"lg\": …})." }, "DisplayTextHorizontal": { "type": "boolean", "default": false, "description": "Specifies whether the display text should be horizontally displayed." }, "DisplayTextWidth": { "type": [ "number", "object" ], "description": "The width of the display text in pixels. Accepts a responsive value map ({\"sm\": …, \"md\": …, \"lg\": …}).", "default": 100 }, "LabelWidth": { "type": [ "number", "object" ], "description": "The width of the input's label in pixels. Accepts a responsive value map ({\"sm\": …, \"md\": …, \"lg\": …}).", "default": 100 }, "FocusedColor": { "type": [ "string", "object" ], "description": "The color of the text when the input is focused. Accepts a color name, the \"primary\" token, a #hex string, or a gradient object ({\"Colors\": [...], \"Type\": \"Linear\"|\"Radial\"|\"Sweep\"}).", "x-editor": "color" }, "InputValidationRegex": { "type": "string", "description": "A regular expression used to validate the input." }, "InputValidationErrorMessage": { "type": "string", "description": "The error message displayed when the input fails validation." } }, "examples": [ { "PresentationType": "TextInput", "Name": "Email", "HintText": "you@example.com", "IsRequired": true, "BorderColor": "#CCCCCC", "BorderRadius": 8 }, { "PresentationType": "TextInput", "Name": "Password", "HintText": "Password", "ObscureText": true, "BorderColor": "#CCCCCC", "BorderRadius": 8 } ], "x-icon": "<svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"8\" width=\"18\" height=\"8\" rx=\"2\"/><path d=\"M7 12h3\"/></svg>", "x-family": "Presentations", "x-name": "TextInput", "x-version": "1.0", "x-source-package": "zero-schema" }