# 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

``` ## 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). ## 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.