Errors

Text input field

Toggle source (Jade)
.container
	.row
		+form('standard')
			+field().has-single-err
				+label('email') E-mail
				+input()(value="bad.email.com")
				+field-error()
					+field-msg
						| There's something wrong with the stuff here

Select input field

Toggle source (Jade)
.container
	.row
		+form('standard')
			+field().has-single-err
				+label('country') Country
				+select('country', null, {
					bn: 'Bangladesh',
					lk: 'Sri Lanka',
					gh: 'Ghana'
				}, 'Country')
				+field-error()
					+icon('lg', 'warning')
					+field-msg.off-xs
						| Something is messed up, yo.
					+sprite('web', 'warning-white')
					+field-msg.on-xs
						| Something is messed up, yo.

Radio buttons

Toggle source (Jade)
.container
	.row
		+form('standard')
			+field('inline').has-group-err
				+label() I am a
				+label()
					+radio('being', 'robot', null, 'robot')
					| Robot
				+label()
					+radio('being', 'human', null, 'robot')
					| Human
				+field-error()
					+field-msg
						| You must select an option that is not robot or human. Good luck.

Check boxes

Toggle source (Jade)
.container
	.row
		+form('standard')
			+field('list').has-group-err
				+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-tooltip()
					| This tooltip should not appear since tooltips can not co-exist with errors!
				+field-error()
					+icon('lg', 'warning')
					+field-msg.off-xs
						| You need to eat more fruits on a daily basis. Let's make this message really long so it wraps. Wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap.
					+sprite('web', 'warning-white')
					+field-msg.on-xs
						| You need to eat more fruits on a daily basis. Let's make this message really long so it wraps. Wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap wrap.

Selector

Toggle source (Jade)
.container
	.row
		+form('standard')
			+field().has-single-err
				+selector('bar', 'Closed Selector')
					+selector-option('bar', 'a')
						| First item
					+selector-option('bar', 'b')
						| Second item
				+field-tooltip()
					| This tooltip should not show!
				+field-error()
					+field-msg
						| You gotta choose something else here, dude

Group field with error

Toggle source (Jade)
.container
	.row
		+form('standard')
			+field('inline').has-group-err
				+label('price') Price
				+input('price')(placeholder='Price')
				+select('currency', null, [
					{
						key: 'USD',
						label: '$'
					},
					{
						key: 'SEK',
						label: 'kr.'
					}
				])
				+label()
					+checkbox('negotiable[]', 'negotiable', null, [])
					| Negotiable
				+field-tooltip()
					| This tooltip should not appear since tooltips can not co-exist with errors!
				+field-error()
					+icon('lg', 'warning')
					+field-msg.off-xs
						| Some kind of group error message here. This message is kinda long too, to see how this looks when the text wraps. Hopefully this is enough text to make the error message wrap on all platforms.
					+sprite('web', 'warning-white')
					+field-msg.on-xs
						| Some kind of group error message here. This message is kinda long too, to see how this looks when the text wraps. Hopefully this is enough text to make the error message wrap on all platforms.