# Input-month ## Examples ### Default ```html ``` ### WithValue ```html ``` ### Required ```html ``` ### WithError ```html ``` ### Disabled ```html ``` ### WithDescription ```html ``` ### WithHint ```html ``` ### FullWidth ```html ``` ### Horizontal ```html ``` ### CustomRange ```html ``` ### InForm ```html Submit ``` ### MultipleInputs ```html ``` ### WithLongLabels ```html ``` ## Usage **Use an Input Month to:** - Allow users to select a specific month and year (e.g., birth month, subscription start date, contract period). - Collect temporal data where only month precision is needed, not specific dates. - Provide a consistent, accessible interface across all browsers and devices. - Restrict selections to a specific date range (e.g., only recent years or historical periods). **Do not use an Input Month to:** - Select specific dates or days (use `m-datepicker` instead). - Display multiple date fields together (use separate dedicated components for start/end dates). - Show non-editable date information (use a text display component instead). ## Value Format The component uses **ISO 8601 YYYY-MM format** for values (e.g., `2024-10` for October 2024). This ensures: - Consistent data format across all locales - Easy parsing and validation - Standard compatibility with backend systems ## Localization Month names are automatically localized based on the user's system language. The component supports all languages available in the Mark design system: - English (en) - Finnish (fi) - Swedish (sv) - Danish (da) - Norwegian Bokmål (nb) - Norwegian Nynorsk (nn) - French (fr) - German (de) - Polish (pl) - Romanian (ro) - Dutch (nl) ## Date Range Control Use the `min` and `max` properties to restrict the selectable date range: - `min="2020-01"` - Users can only select from January 2020 onwards - `max="2025-12"` - Users can only select up to December 2025 - Default range: 2000-01 to 2040-01 ## Other Considerations - Always provide a clear, descriptive label indicating what the month selection represents. - Use the `description` prop to clarify the purpose when the label alone isn't sufficient. - Include validation and error messages for required fields. - Consider the appropriate date range for your use case to avoid overwhelming users with unnecessary options. - Use `required` attribute when the field is mandatory, and provide clear error feedback. - The component automatically handles focus management between the two select dropdowns for better accessibility. ## Accessibility The component follows WCAG 2.2 AA standards: - Each dropdown (month and year) has a proper accessible label - Labels are hidden visually but remain accessible to screen readers - Error states are properly announced with `aria-invalid` and `aria-errormessage` - All interactive elements are keyboard navigable - Required fields are properly marked with `aria-required` - Focus management ensures smooth keyboard navigation between selects ## Design Rationale The Input Month component provides a more accessible and consistent alternative to native HTML month inputs, which have inconsistent browser support. By using two separate dropdowns for month and year selection, users get: - Clear, localized month names instead of abbreviations - Better mobile experience with native select pickers - Consistent behavior across all browsers and platforms - Easier scanning and selection with proper visual hierarchy