mithui

A ui library for mithril.

Live demo

Screenshot

Available Components

Dropdown

m(mui.dropdown, [
  m('div', 'Item 1'),
  m('div', 'Item 2'),
  m('div', 'Item 3'),
])

Forms

Text Input

m(mui.textInput, {
  name: 'firstName',
  label: 'First Name',
  errors: errors.firstName,
  autoFocus: true,
  initialValue: 'Joe'
})

Multiline Input

m(mui.multilineInput, {
  name: 'bio',
  label: 'Profile Bio',
  errors: errors.lastName,
  initialValue: 'Some cool information about me'
})

Select

m(mui.select, {
  name: 'location',
  label: 'Location',
  errors: errors.location,
  options: [
    {
      value: 'au',
      label: 'Australia'
    },
    {
      value: 'uk',
      label: 'United Kingdom'
    }
  ],
  initialValue: 'uk'
})

Checkbox

m(mui.checkbox, {
  name: 'active',
  label: 'Active',
  errors: errors.active,
  initialValue: true
})

File Picker

m(mui.filePicker, {
  name: 'pictures',
  label: 'Profile Pictures',
  errors: errors.picture,
  prefix: '/data/avatars/',
  multiple: true,
  initialValue: [{
    name: 'bbb.txt',
    id: 12
  }]
})

Example Usage

const m = require('mithril');
const mui = require('mithui');

m(
  'div',
  { class: 'someForm' },
  m(mui.form,
    m(mui.textInput, {
      name: 'firstName',
      label: 'First Name',
      autoFocus: true,
      initialValue: 'Joe'
    }),
    
    m(mui.textInput, {
      name: 'lastName',
      label: 'Last Name',
      initialValue: 'Bloggs'
    })
  )
)