Inputs

Inputs use a specific DOM tree to easily handle error messages. It uses a container div lui field that will wrap around:

Example
error message 


	

		
		
	

	

		error message

Each input comes in two themes: Material or compact. Theme must be specified as a class of the lui input compact/material

Text input

Material
Compact
Show code

Checkbox

Checkbox buttons must have the class checkbox on their .lui.input element.
Material
Compact
Show code

Radio buttons

Radio buttons must have the class radio on their .lui.input element. You can group them in a div with the classes lui input to add a label to the group and handle error messages.
Material
Compact
Show code 

	

		

			
			
		

		[...]
		
	



	

		

			
			
		

		[...]

IBAN

Material
Compact
Show code

Image Picker

Material
Compact
Show code

Moment Picker

Material
Compact
Show code

Input with tags

Tags are grouped and styled in a DOM element with the class tags and must bear the class tag.
Material
Tag
Compact
Tag
Show code 

	

		
			Tag
		
		
	



	

		
			Tag

Timespan

Material
Compact
Show code

UI-Select

Material
{{$select.selected.name}}
{{$item}} {{color}}
Compact
{{$select.selected.name}}
{{$item}} {{color}}
Show code 

	
		{{$select.selected.name}}
		
			
		
	
	





	
		{{$item}}
		
			{{color}}
		
	
	


	
		{{$select.selected.name}}
		
			
		
	
	





	
		{{$item}}
		
			{{color}}

Date Picker

Material
Compact
Show code

Daterange Picker

Material
Compact
Show code

Translations input

Material
Compact
Show code

Fitting input

Material
Compact