A standard form.
+form('standard') +field() +label('long') Name +input('long', 'dong')(placeholder='Name') +field() +field-info() +icon('lg', 'edit').is-inline +sprite('web', 'edit') | Some information here +label('email') Email +input('email')(placeholder='Email', value='foo@bar') +field() +label('message') Message +textarea('message')(placeholder='Message') +field() +label('country') Country +select('country', null, { bn: 'Bangladesh', lk: 'Sri Lanka', gh: 'Ghana' }, 'Country') +field-tooltip() | Tip! Choose the country where you live! +field() +label('currency') Currency +select('currency', null, [ { key: 'USD', label: '$' }, { key: 'SEK', label: 'kr.' } ]) +field() +label('location') Location +select-groups('location', null, [ { label: 'Cities', options: [ { key: 123, label: 'City A' }, { key: 234, label: 'City B' } ] }, { label: 'Regions', options: [ { key: 345, disabled: true, label: 'Region C' }, { key: 567, label: 'Region D' } ] } ], null, 345) +field-tooltip() | This is a tooltip with some information for the user. +field('list') +label() Fruits +label() +checkbox('fruits[]', 'banana', null, ['apple', 'pear']) | Banana +label() +checkbox('fruits[]', 'apple', null, ['apple', 'pear']) | Apple +label() +checkbox('fruits[]', 'pear', null, ['apple', 'pear']) | Pear +field('inline') +label() +checkbox('terms', '1', null, '1') | I agree to the terms +field('inline') +label() I am a +label() +radio('being', 'robot', null, 'robot') | Robot +label() +radio('being', 'human', null, 'robot') | Human +buttons('inline') +button-standard Submit
Wrapping buttons/inputs in an inline form will give them a 'merged' appearance and a green outline and color.
.container +form('inline') .row .col-10.sm-8 +input()(placeholder='Find your pigeon now!') .col-2.sm-4 +button-secondary Search
An inline form with > 2 children
.container +form('inline') .row .col-2.sm-3 +button-secondary Filter .col-8.sm-6 +input()(placeholder='Find your pigeon now!') .col-2.sm-3 +button-secondary Search