# Input-text ## Examples ### Default ```html ``` ### Required ```html ``` ### Disabled ```html

``` ### FullWidth ```html ``` ### WithHint ```html ``` ### WithDescription ```html ``` ### WithError ```html ``` ### WithIcon ```html ``` ### WithPlaceholder ```html ``` ### WithLongText ```html ``` ### Horizontal ```html ``` ### WithLongTextHorizontal ```html ``` ### WithAutocomplete ```html

``` ### WithButton ```html

📋 Button Slot Guidelines:

✅ Use only m-button components with variant="default"
✅ Keep buttons simple and focused on immediate actions
❌ Avoid complex interactive components or popovers
❌ For date pickers, use m-datepicker component instead

Simple Action Buttons

Copy

Icon-Only Buttons

Error State

Send

``` ## Usage **Use an Input to:** - Allow users to enter freeform text (e.g., names, job titles, email addresses). - Collect structured data such as numbers, dates, or passwords. - Provide search functionality where users can input keywords. **Do not use an Input to:** - Select from predefined options (use radio buttons, checkboxes, or dropdowns instead). - Display non-editable information (use a text display component instead). - Input complex formatted data without validation (ensure proper input masks or formatting helpers are used). ## Button Slot Guidelines The `button` slot is designed for simple action buttons that provide immediate functionality. **Only use default buttons in the button slot** - avoid complex components like popovers, dropdowns, or other interactive elements. **✅ Recommended:** - Simple action buttons (copy, send, search) - Toggle buttons (show/hide password) - Icon-only buttons - Reset or clear buttons **❌ Not Recommended:** - Popover-wrapped buttons - Dropdown menus - Complex interactive components - Date pickers (use m-datepicker component) For complex button interactions, use specialized components like m-datepicker or create custom implementations. ## Other Considerations - Ensure every input field has a descriptive label. - Use placeholder text sparingly — it should not replace labels as it disappears when users type. - Include error messages and validation hints for incorrect or missing input. - Labels should be short, clear, and aligned with the user’s expectations (e.g., "First Name", "Phone Number"). - Provide help text when input expectations may be unclear (e.g., password rules). - Restrict input types appropriately (e.g., type="email" for email fields, type="number" for numeric input). ## Design Rationale Alignment with standards ensures all users, including those with disabilities, can interact with input fields effectively.