{"type":"doc","content":[{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{},"macroMetadata":{"macroId":{"value":"5cdea3ca-b27b-4651-b677-29fed9ae1d32"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"c9a95e19-69f2-4710-b04a-27ae7d98bd06"}},{"type":"heading","attrs":{"level":1},"content":[{"text":"Description","type":"text"}]},{"type":"paragraph","content":[{"text":"A text field is a single-line text input control. It allows users to enter a small amount of text or numeric data in one line.","type":"text","marks":[{"type":"textColor","attrs":{"color":"#172b4d"}}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":120,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":120,"alt":"Text Field - Regular.png","id":"c1b9f988-ac26-434b-84dc-7ccf32810b25","collection":"contentId-1285885991","type":"file","height":22}}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Types","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":1800.0,"localId":"c3fb2717-2568-48da-8acd-4c3a15117140"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[330.0]},"content":[{"type":"paragraph","content":[{"text":"Type","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[430.0]},"content":[{"type":"paragraph","content":[{"text":"Usage","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[330.0]},"content":[{"type":"paragraph","content":[{"text":"Basic text field","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[430.0]},"content":[{"type":"paragraph","content":[{"text":"The most common input field, where users can enter text or numeric data.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[330.0]},"content":[{"type":"paragraph","content":[{"text":"Secured text field","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[430.0]},"content":[{"type":"paragraph","content":[{"text":"Used when text needs to be secured, e.g., password.","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Usage & Behavior","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"General guidelines","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Structure","type":"text"}]},{"type":"paragraph","content":[{"text":"The text field consists of:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Preceding label - a meaningful label describing the information the user needs to provide.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Input Field.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Guiding / hint text (optional) - a short description of the expected input text, shown within the input field.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"A show/hide password button (secured text fields only, optional).","type":"text"}]}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":210,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":210,"id":"76fbf4c2-d24b-4f90-92ef-699f6d165e54","collection":"contentId-1285885991","type":"file","height":22}}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"States","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":1800.0,"localId":"a7189949-3297-4ecb-9143-359ce2c3051c"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[128.0]},"content":[{"type":"paragraph","content":[{"text":"State","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[312.0]},"content":[{"type":"paragraph","content":[{"text":"Default","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[320.0]},"content":[{"type":"paragraph","content":[{"text":"Filled","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[128.0]},"content":[{"type":"paragraph","content":[{"text":"Regular","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[312.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":120,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":120,"alt":"Text Field - Regular.png","id":"c1b9f988-ac26-434b-84dc-7ccf32810b25","collection":"contentId-1285885991","type":"file","height":22}}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[320.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":120,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":120,"alt":"Text Field - Regular filled.png","id":"dbfc0572-aba8-42fb-951e-650346e137f3","collection":"contentId-1285885991","type":"file","height":22}}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[128.0]},"content":[{"type":"paragraph","content":[{"text":"Hover","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[312.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":120,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":120,"alt":"Text Field - Hover.png","id":"baece430-ab46-4263-936e-8f728e02ce8d","collection":"contentId-1285885991","type":"file","height":22}}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[320.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":120,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":120,"alt":"Text Field - Hover filled.png","id":"d34424da-81b7-4f5b-8056-ecbae927b48d","collection":"contentId-1285885991","type":"file","height":22}}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[128.0]},"content":[{"type":"paragraph","content":[{"text":"Active","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[312.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":120,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":120,"alt":"Text Field - Active.png","id":"7d18f2c1-10e7-45e7-b840-99b2cafa761f","collection":"contentId-1285885991","type":"file","height":22}}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[320.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":120,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":120,"alt":"Text Field - Active filled.png","id":"b4715f4f-ce73-4a33-a4df-8b7c741073d6","collection":"contentId-1285885991","type":"file","height":22}}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[128.0]},"content":[{"type":"paragraph","content":[{"text":"Disabled","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[312.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":120,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":120,"alt":"Text Field - Disabled.png","id":"63cb6020-0c7f-417d-a026-269f4e583108","collection":"contentId-1285885991","type":"file","height":22}}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[320.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":120,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":120,"alt":"Text Field - Disabled filled.png","id":"fb86aefe-92a7-44ba-92bb-c48402b7fd2f","collection":"contentId-1285885991","type":"file","height":22}}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[128.0]},"content":[{"type":"paragraph","content":[{"text":"Read Only","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[312.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":120,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":120,"alt":"Text Field - Read only.png","id":"ff096ac6-f791-44d5-9c9d-76a1ba533354","collection":"contentId-1285885991","type":"file","height":22}}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[320.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":120,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":120,"alt":"Text Field - Read only filled.png","id":"689cbacb-7952-4e18-83b4-41c5cc351656","collection":"contentId-1285885991","type":"file","height":22}}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[128.0]},"content":[{"type":"paragraph","content":[{"text":"Error","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[312.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":120,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":120,"alt":"Text Field - Error.png","id":"1df5f486-451a-4ab7-bf57-188ef7c03d36","collection":"contentId-1285885991","type":"file","height":22}}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[320.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":120,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":120,"alt":"Text Field - Error filled.png","id":"4937bbac-4d13-4de5-b7df-31e8f2f1d95f","collection":"contentId-1285885991","type":"file","height":22}}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[128.0]},"content":[{"type":"paragraph","content":[{"text":"Warning","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[312.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":120,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":120,"alt":"Text Field - Warning hint.png","id":"bc3d88fb-e99d-41a3-aff2-646abdbac5f2","collection":"contentId-1285885991","type":"file","height":22}}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[320.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":120,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":120,"alt":"Text Field - Warning filled.png","id":"1807eba2-33ff-4fae-9b36-e9872736a0db","collection":"contentId-1285885991","type":"file","height":22}}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[128.0]},"content":[{"type":"paragraph","content":[{"text":"Focused","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[312.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":126,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":126,"alt":"Text Field - Focused.png","id":"2c0ed405-af89-4521-ab4b-4eebc2f0049b","collection":"contentId-1285885991","type":"file","height":26}}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[320.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":124,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":124,"alt":"Text Field - Focused filled.png","id":"7eb55213-b33a-491e-a97b-232ad90f1725","collection":"contentId-1285885991","type":"file","height":26}}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[128.0]},"content":[{"type":"paragraph","content":[{"text":"Focused, Hover","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[312.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":126,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":126,"alt":"Text Field - Focused hover.png","id":"daee76c8-2872-4b79-9d0d-27a575bd6a6d","collection":"contentId-1285885991","type":"file","height":26}}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[320.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":124,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":124,"alt":"Text Field - Focused hover filled.png","id":"962cd5af-008a-4d17-ac1d-a28636eb9f58","collection":"contentId-1285885991","type":"file","height":26}}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[128.0]},"content":[{"type":"paragraph","content":[{"text":"Focused, Active","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[312.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":126,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":126,"alt":"Text Field - Focused active.png","id":"2e7a78af-1c2c-4b2d-88b3-e883993059b6","collection":"contentId-1285885991","type":"file","height":26}}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[320.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":124,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":124,"alt":"Text Field - Focused active filled.png","id":"5e9ff90d-9003-4ed6-b18f-4081b0313d01","collection":"contentId-1285885991","type":"file","height":26}}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[128.0]},"content":[{"type":"paragraph","content":[{"text":"Focused, Disabled","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[312.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":124,"id":"4781f186-7076-45c0-8aad-894a8d382a9d","collection":"contentId-1285885991","type":"file","height":26}}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[320.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":124,"id":"ea31fca9-21dd-4967-b406-425d89e24f86","collection":"contentId-1285885991","type":"file","height":26}}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Interaction","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"On hover over the text field, the mouse cursor will change to a text cursor.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"On click:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"where no text has been added to the field:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"a text cursor will appear at the beginning of the text field.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"the hint text will disappear.","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"where text already exists in the field:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"a text cursor will appear in the position where the user clicks.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"double-clicking a word inside the text field will select that word.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"triple-clicking the text field will select all of the text.","type":"text"}]}]}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"As text is entered it will appear from the left-hand side.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Text characters may be masked (secured text field only).","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":120,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":120,"alt":"Text Field - Password.png","id":"f6d18d98-f7fb-44ee-8c57-92256d8aee1c","collection":"contentId-1285885991","type":"file","height":22}}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Once the cursor reaches the end of the field, it will stop and new characters will be added at that point. The start of the text string will disappear on the left-hand side of the field.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"If a character limit has been set, reaching the limit will prevent the user from entering any more characters.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"When the user clicks away and the field becomes inactive:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"if the text string exceeds the width of the field, the start of the text string will come back into view.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"if no text has been added the hint text will reappear.","type":"text"}]}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Validations and errors","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Please refer to the ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#171717"}}]},{"text":"Field Validation","type":"text","marks":[{"type":"link","attrs":{"href":"https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/849479282"}}]},{"text":" ","type":"text"},{"text":"page for more information.","type":"text","marks":[{"type":"textColor","attrs":{"color":"#171717"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"A text field with a warning will have an orange ","type":"text"},{"text":"border and a warning icon","type":"text","marks":[{"type":"annotation","attrs":{"annotationType":"inlineComment","id":"35ca7507-30bf-41a6-957e-484b3bcc8bdb"}}]},{"text":", as shown below:","type":"text"}]}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":284,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":284,"alt":"Textfield Validation Warning.png","id":"69d01b03-6f1a-433a-883b-58b307e1bb6d","collection":"contentId-1285885991","type":"file","height":46}}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"A text field with an error will have a red ","type":"text"},{"text":"border and an error icon","type":"text","marks":[{"type":"annotation","attrs":{"annotationType":"inlineComment","id":"28c83e43-14b2-4d9e-8985-52939d2fe5a2"}}]},{"text":", as shown below:","type":"text"}]}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":264,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":264,"alt":"Textfield Validation Error.png","id":"58932c96-cf2a-40d2-99e2-f378851e2001","collection":"contentId-1285885991","type":"file","height":46}}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The orange or red border will be removed when the content is updated and becomes valid.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Numeric-only text fields will prevent any characters other than numbers from being entered.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"When Caps lock or Num lock are on, secured text fields (e.g. password) will show a message warning to the user - see the ","type":"text"},{"text":"Common Messages Repository","type":"text","marks":[{"type":"link","attrs":{"href":"https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/3365406893"}}]},{"text":" for wording.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Best practices","type":"text","marks":[{"type":"annotation","attrs":{"annotationType":"inlineComment","id":"80f0188e-78d0-44ef-81c2-a23e3ef65c91"}}]}]},{"type":"paragraph","content":[{"text":"Use:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"where the user needs to enter a short, single-line text in plain text, such as a password, URL, phone number or email address.","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Don’t use if:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"the user needs to enter dates and times → use a ","type":"text"},{"text":"Date Picker","type":"text","marks":[{"type":"link","attrs":{"href":"https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/772342460"}}]},{"text":" or a ","type":"text"},{"text":"Time Picker","type":"text","marks":[{"type":"link","attrs":{"href":"https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/1053668753"}}]},{"text":".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"the user needs to increase or decrease a numeric value → use a","type":"text"},{"text":" ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#ff991f"}}]},{"text":"Numeric Stepper","type":"text","marks":[{"type":"textColor","attrs":{"color":"#ff991f"}},{"type":"link","attrs":{"href":"https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/772277257"}}]},{"text":".","type":"text","marks":[{"type":"textColor","attrs":{"color":"#ff991f"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"the user needs to enter a lot of text → use a ","type":"text"},{"text":"Text Area","type":"text","marks":[{"type":"link","attrs":{"href":"https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/659424851"}}]},{"text":".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"the user needs to perform a search → use a ","type":"text"},{"text":"Search Field","type":"text","marks":[{"type":"link","attrs":{"href":"https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/916884213"}}]},{"text":".","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"General","type":"text","marks":[{"type":"strong"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Always provide a clear and meaningful preceding ","type":"text"},{"text":"Label","type":"text","marks":[{"type":"link","attrs":{"href":"https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/950179519/Text+Formats#Labels"}}]},{"text":" for any input field.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Where appropriate, help users by providing a guiding/hint text describing the expected input text.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"When the user is filling in a secured text field, allow them to temporarily view the text.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Accessibility compliance","type":"text","marks":[{"type":"annotation","attrs":{"annotationType":"inlineComment","id":"1372ac9d-1711-44c4-b0f4-36578629793c"}},{"type":"textColor","attrs":{"color":"#172b4d"}}]}]},{"type":"paragraph","content":[{"text":"Unless otherwise specified, see our general compliance information in ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#172b4d"}}]},{"text":"Fundamentals - Accessibility","type":"text","marks":[{"type":"link","attrs":{"href":"https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/766085784"}}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Focus management","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":1800.0,"localId":"55733354-c9d0-4634-9330-eacdf8e0a735"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[253.0]},"content":[{"type":"paragraph","content":[{"text":"Keyboard","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[507.0]},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[253.0]},"content":[{"type":"paragraph","content":[{"text":"Tab","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[507.0]},"content":[{"type":"paragraph","content":[{"text":"Navigates to the next component.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[253.0]},"content":[{"type":"paragraph","content":[{"text":"Shift + Tab","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[507.0]},"content":[{"type":"paragraph","content":[{"text":"Navigates to the previous component.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[253.0]},"content":[{"type":"paragraph","content":[{"text":"Space","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[507.0]},"content":[{"type":"paragraph","content":[{"text":"Acts as within a text input.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[253.0]},"content":[{"type":"paragraph","content":[{"text":"Enter","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[507.0]},"content":[{"type":"paragraph","content":[{"text":"Acts as within a text input.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[253.0]},"content":[{"type":"paragraph","content":[{"text":"Esc","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[507.0]},"content":[{"type":"paragraph","content":[{"text":"N/A","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[253.0]},"content":[{"type":"paragraph","content":[{"text":"Arrows","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[507.0]},"content":[{"type":"paragraph","content":[{"text":"Acts as within a text input.","type":"text"}]}]}]}]},{"type":"table","attrs":{"layout":"default","width":1800.0,"localId":"1a5a4262-2794-49a8-bab8-557b48a42f04"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[255.0]},"content":[{"type":"paragraph","content":[{"text":"Mouse ","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[505.0]},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[255.0]},"content":[{"type":"paragraph","content":[{"text":"Right click","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[505.0]},"content":[{"type":"paragraph","content":[{"text":"Set Focus state on component","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Responsive design","type":"text"}]},{"type":"paragraph","content":[{"text":"Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see ","type":"text"},{"text":"Fundamentals - Responsive design","type":"text","marks":[{"type":"link","attrs":{"href":"https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/3502506259"}}]},{"text":".","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Where the available space is narrow:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"the width of the text field should dynamically respond to its container, taking up 100% of the available space.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"the label for the text area should be shown above the field, rather than to the left.","type":"text"}]}]}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Design","type":"text","marks":[{"type":"textColor","attrs":{"color":"#172b4d"}}]}]},{"type":"table","attrs":{"layout":"default","width":1800.0,"localId":"d2f46813-c3bd-49ec-827e-e0ebc25378c7"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[436.0]},"content":[{"type":"paragraph","content":[{"text":"Zeplin link","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[324.0]},"content":[{"type":"paragraph","content":[{"text":"Screen thumbnail","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[436.0]},"content":[{"type":"paragraph","content":[{"text":"https://zpl.io/aMW4dR2","type":"text","marks":[{"type":"link","attrs":{"href":"https://zpl.io/aMW4dR2"}}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[324.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":371,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":650,"alt":"Text Field - Status.png","id":"83248a31-34d6-426f-b70e-72a75cd2c9b1","collection":"contentId-1285885991","type":"file","height":882}}]}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Code","type":"text","marks":[{"type":"annotation","attrs":{"annotationType":"inlineComment","id":"126d7202-5b6f-4400-b1fe-e3d7a0f55086"}}]}]},{"type":"paragraph"},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"html-macro","parameters":{"macroParams":{"__bodyContent":{"value":"\n\n\n\n\n\n\n\n\n\n\n

\n\t\t\t

Text Field

\n\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t\t\tRegular\n\t\t\t\t\t\t