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. The component should display the current month by default.
Example month message
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 label message text disabled disabled message error error message success success message
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 label message text disabled disabled message error error message success success message
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 label message text disabled disabled message error error message success success message
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
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. bp-month Events Name Types Description input
InputEvent
occurs when the value changes change
InputEvent
occurs when the value changes
Properties Name Types Description accessor
determines number of characters type
string
value
string | number | FormData | File
disabled
boolean
required
boolean
readonly
boolean
multiple
boolean
autocomplete
string
name
string
represents the name of the current pattern
string
placeholder
string
minLength
number
maxLength
number
min
number
max
number
size
number
valueAsNumber
formAssociated
boolean
focus
reset
Attributes Name Types Description accessor
determines number of characters
Slots Name Types Description prefix
slot for prefix text or icons suffix
slot for suffic text or icons