> For the complete documentation index, see [llms.txt](https://docs.claimr.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.claimr.io/ux-requirements/interactive-components-ux-requirements.md). # Interactive components UX requirements Interactive components, such as buttons and input fields, are essential elements for gathering user information and enabling interactions within your claimr campaigns. Designing user-friendly interactive components is crucial for ensuring a smooth and efficient user experience. ## **Log in / Log out buttons** Facilitate user authentication and session management.

* **Clear Labels:** Use concise and descriptive labels like "Log In" and "Log Out". * **Visual Distinction:** Differentiate the two buttons through color, styling, or placement. * **Feedback:** Provide visual feedback upon interaction, such as a loading state or change in button appearance. * **Accessibility:** Ensure buttons have clear focus states. ## **Action buttons** Trigger specific actions within the campaign (e.g., "Submit," "Next," "Follow").

* **Clear labels:** Use action-oriented verbs that accurately describe the button's function. * **Visual hierarchy:** Make action buttons prominent and visually distinct from other elements. * **Disabled state:** Clearly indicate when a button is disabled (e.g., grayed out, with a tooltip explaining why). * **Feedback:** Provide visual feedback upon interaction, such as a loading state or change in button appearance. ## **Checkbox** Allow users to select or deselect options.

* **Clear labels:** Provide concise labels adjacent to checkboxes, describing the corresponding options. * **Visual states:** Clearly differentiate between checked, unchecked, and disabled states using distinct visual cues (e.g., checkmark, empty box, grayed-out box). * **Hit area:** Make the clickable area surrounding the checkbox large enough for easy interaction. ## **Text input** Enable users to enter textual information.

* **Clear labels:** Provide descriptive labels above or adjacent to input fields. * **Input field size:** Adjust the input field size appropriately based on the expected input length. * **Placeholder text/hint:** Use placeholder text or hints to guide users on the expected input format or content. * **Disabled state:** Clearly indicate when an input field is disabled (e.g., grayed out). * **Error handling:** Provide clear error messages and guidance if input validation fails. ## **Upload image** Allow users to upload image files.

* **Clear CTA:** Use a clear button or label (e.g., "Upload Image") to initiate the upload process. * **File selection:** Provide a standard file selection dialog for users to choose an image file. * **Image preview:** Display a preview of the uploaded image before submission. * **File validation:** Implement file type and size validation to prevent errors. * **Error handling:** Provide clear error messages if file validation fails. * **Accessibility:** Ensure the upload process is accessible to screen readers and keyboard users. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.claimr.io/ux-requirements/interactive-components-ux-requirements.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.