2.1.2 • Public • Published

    Mutt Forms Widget - Age

    Mutt Form Vue widget to capture an age in years & months


    Please ensure you install the peer dependencies which are defined in package.json.

    Select dropdown styling

    This widget makes use of the vue-select component.

    No styling is included for this component, you will need to include it by either including the CSS from the component:

    import 'vue-select/dist/vue-select.css';

    or importing the SCSS:

    @import "vue-select/src/scss/vue-select.scss";

    More details on styling the dropdown can be found in the documentation for vue-select.

    Field Options

    The age widget accepts the following options:

    option type description default
    min ISO-8601 formatted String The minimum date allowed null
    max ISO-8601 formatted String The maximum date allowed null
    default Date or String The default date to set null
    dateFieldSeparator String A character or string of characters that adds a span containing the character between the date field inputs
    attrs Object of Strings or Numbers The html attributes for the field wrapper e.g data-* null

    Please note here that min/max refer to the minimum & maximum dates returned by the widget rather than the age, therefore max should resolve to a later date value than min

    Emitted Events

    When a valid entry of years & months is entered, the widget will emit the ageValidated event with the following object:

    key: this.field.name,
    value: this.field.value,
    action: 'populated',
    validated, // true if the validation rules pass
    bubble: true,

    Complete Example

    dob: {
        '<p>If you don’t know the exact age, please provide a considered estimate.</p>',
      label: null,
      max: 'P-4W',
      min: 'P-21Y',
      attrs: {
        data-qa-locator: 'pet-info-age-selector'
      natural: {
        prefix: ' and you are ',
        suffix: ' old.',
        title: 'How old are you?',
        trigger: '',
      serialize: 'date',
      widget: 'naturalage',


    npm i @mutt/widget-age

    DownloadsWeekly Downloads






    Unpacked Size

    34.1 kB

    Total Files


    Last publish


    • stevenroberts-bbm
    • lcgreen
    • chris.stroud
    • nicksnell
    • andypattendenbbm
    • samhicks1985
    • shaunkrd
    • guyf
    • ant_p
    • muttbot
    • andyflynn-bbm
    • purepear
    • alexrussell
    • batornator
    • sugarbits
    • denis.gruba-bbm