The month input component is used to allow the user to select a month from a dropdown menu. It is used as a replacement for traditional text input when selecting a month.
Example
Enables month and year selection.
code
<script type="module">
import '@blueprintui/components/include/month.js';
</script>
<bp-field>
<label>month</label>
<bp-month></bp-month>
<bp-field-message>message</bp-field-message>
</bp-field>Vertical
Demonstrates the month picker in vertical form layout.
code
<bp-form-group layout="vertical">
<bp-field layout="vertical">
<label>label</label>
<bp-month></bp-month>
<bp-field-message>message text</bp-field-message>
</bp-field>
<bp-field layout="vertical">
<label>disabled</label>
<bp-month disabled></bp-month>
<bp-field-message>disabled message</bp-field-message>
</bp-field>
<bp-field layout="vertical" status="error">
<label>error</label>
<bp-month></bp-month>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>
<bp-field layout="vertical" status="success">
<label>success</label>
<bp-month></bp-month>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>Horizontal
Demonstrates the month picker in horizontal form layout.
code
<bp-form-group layout="horizontal">
<bp-field layout="horizontal">
<label>label</label>
<bp-month></bp-month>
<bp-field-message>message text</bp-field-message>
</bp-field>
<bp-field layout="horizontal">
<label>disabled</label>
<bp-month disabled></bp-month>
<bp-field-message>disabled message</bp-field-message>
</bp-field>
<bp-field layout="horizontal" status="error">
<label>error</label>
<bp-month></bp-month>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>
<bp-field layout="horizontal" status="success">
<label>success</label>
<bp-month></bp-month>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>Compact
Demonstrates the month picker in compact form layout.
code
<bp-form-group layout="compact">
<bp-field layout="compact">
<label>label</label>
<bp-month></bp-month>
<bp-field-message>message text</bp-field-message>
</bp-field>
<bp-field layout="compact">
<label>disabled</label>
<bp-month disabled></bp-month>
<bp-field-message>disabled message</bp-field-message>
</bp-field>
<bp-field layout="compact" status="error">
<label>error</label>
<bp-month></bp-month>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>
<bp-field layout="compact" status="success">
<label>success</label>
<bp-month></bp-month>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>Install
NPM
// npm package
import '@blueprintui/components/include/month.js';CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/month.js/+esm';
</script>Accessibility
- The component should be keyboard accessible, allowing users to select a month using only the keyboard.
- The component should provide clear and descriptive text for the selected month to improve accessibility for users with visual impairments.
Browser Support
Native input type month is not supported in Safari or Firefox. See caniuse for more details.
bp-month
Events
| Name | Types | Description |
|---|---|---|
input | InputEvent | occurs when the value changes |
change | InputEvent | occurs when the value changes |
Properties
| Name | Types | Description |
|---|---|---|
type | string | Specifies the input type as month for date selection |
Attributes
| Name | Types | Description |
|---|---|---|
type | string | Specifies the input type as month for date selection |
CSS Properties
| Name | Types | Description |
|---|---|---|
--background-size | ||
--color | ||
--background | ||
--border | ||
--border-radius | ||
--outline | ||
--outline-offset | ||
--padding | ||
--font-size | ||
--line-height | ||
--height | ||
--min-width | ||
--width | ||
--transition | ||
--text-align | ||
--cursor |
Slots
| Name | Types | Description |
|---|---|---|
prefix | slot for prefix text or icons | |
suffix | slot for suffix text or icons |