Forms

Standard form

A standard form.

Toggle source (Jade)
+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

Inline form

Wrapping buttons/inputs in an inline form will give them a 'merged' appearance and a green outline and color.

Toggle source (Jade)
.container
	+form('inline')
		.row
			.col-10.sm-8
				+input()(placeholder='Find your pigeon now!')
			.col-2.sm-4
				+button-secondary Search

Inline form

An inline form with > 2 children

Toggle source (Jade)
.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