email-field

email fields in forms provide a user friendly way to collect email addresses, incorporating validation to ensure data is entered correctly the email field component can only be used in a jig default docid 7ezcdet8xhlyyd9oft jj inside of a form docid 0stw78spssktrq9wbmxau component for capturing an email address email field preview the email field component can be used independently or within a form component, each offering distinct benefits as a standalone, it provides flexibility for isolated usage without requiring a form structure when wrapped in a form, it leverages the form’s instanceid, enabling better coordination and usability when managing multiple fields in a jig configuration options some properties are common to all components, see common component properties docid\ llntd rxe8fmh7wpc5czb for a list and their configuration options core structure instanceid the unique identifier for the email field label provide a label/name for the email field 'label' is displayed as a placeholder when no value is specified other options color sets the color of the email field property based on conditions by using the when property first evaluated to true will be used choose a color from the provided color palette default color is grey if the property is not specified in the yaml see the list of available colors in jigx color palette # errortext add text, string, or expressions to show text under the email field indicating an error/invalid value in the field text is shown in isnegative (red) styling with a red exclamation icon on the right helpertext add text, string, or expressions to guide users by showing text under the email field helper text is displayed only when there is no errortext icon add an icon to the email field the icon apprears on the far right of the field a list of icons is available see jigx icons # for more information initialvalue the initialvalue is the value that will be displayed in the email field when the form is initially loaded you can use this property to preset the field with a default email address so that you do not have to manually select it using the reset state action with initialvalues does not clear the field, it resets the field back to it's initialvalue isautofocused if true the email field will get focus immediately after the form is displayed ishidden if true the email field will be hidden on the form if set to false the field will be shown isignored when true , the field will be ignored when submitting the form and the content will not be stored isoptionallabelhidden if the field is optional you can turn off the "(optional)" label by setting this field to true this property works in combination with isrequired false isrequired set to true when the field is required useful when you use it in form submission set to false the email field is optional and will have (optional) in the label isreturnkeyenabledautomatically when set to true , the keyboard disables the return/done key when there is no text and automatically enables it when there is text the default value is false issensitive if set to true , the text input obscures the text entered so that sensitive email addresses stay secure istextclearedonfocus when set to true , the email field is automatically cleared when editing begins keyboardtype determines which keyboard to open default is email nextproperty name of the property you want to focus next in the form when you use return/next on a keyboard style the following property settings are available \ flex flex property if rendered inside row \ isbusy displays spinner on right side of field it removes any configured icon \ isdisabled disables the email field preventing any input text \ ispositive a green icon displays on the right of the email field more than one can be true it will be evaluated based on priority value the value to show in the email field when the form initially loads this can be combined with the isdisable style to preset the value that cannot be edited on the form actions onchange the action is triggered when the content in the email field is changed use intellisense (ctrl+space) to see the list of available actions state configuration key notes =@ctx component state value state is the variable of the component =@ctx solution state activeitemid now global state variable that can be used throughout the solution examples and code snippets email field on form the example below displays a form input for the email address with an icon and initialvalue set examples see the full example using static data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx components/email field/static data/email field jigx see the full example using dynamic data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx components/email field/dynamic data/email field dynamic jigx email field (static) children \ type component form instanceid email form options children \ type component email field instanceid email options icon email action at initialvalue name\@example com label email email field (dynamic) title email type jig default actions \ children \ type action execute entity options title create record provider data provider dynamic entity default/form method save data email =@ctx components email state value onsuccess type action go back header type component jig header options height medium children type component image options title email source uri https //cdn2 webdamdb com/v1 1280 6enpaxibt9m3 jpg?1554490336 children \ type component form instanceid emails form options children \ type component email field instanceid email options label email helpertext =@ctx datasources field values email see also state #