Month

npm1.8.3

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

// 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.

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`
`value`	`string \| FormData`
`disabled`	`boolean`
`required`	`boolean`
`readonly`	`boolean \| undefined`
`multiple`	`boolean`
`autocomplete`	`string`
`name`	`string`
`pattern`	`string`
`placeholder`	`string`
`minLength`	`number`
`maxLength`	`number`
`min`	`number`
`max`	`number`
`size`	`number`
`valueAsNumber`
`formAssociated`	`boolean`

Attributes

Name	Types	Description
`type`	`string`
`value`	`string \| FormData`
`disabled`	`boolean`
`required`	`boolean`
`readonly`	`boolean \| undefined`
`multiple`	`boolean`
`autocomplete`	`string`
`name`	`string`
`pattern`	`string`
`placeholder`	`string`
`minLength`	`number`
`maxLength`	`number`
`min`	`number`
`max`	`number`
`size`	`number`

Slots

Name	Types	Description
`prefix`		slot for prefix text or icons
`suffix`		slot for suffic text or icons