Smartphoto
User Manual
Menu
Close
User Manual

Input

Input fields can be used to ask any form of input from the user. From simple text and search queries to files, numbers, dates, etc.

Search

A search input always has a search icon to signify its goal. Can be used with the "--no-label" modifier to hide the label visually. 




      
        
      

  
  <div class="a-input a-input--search">

    <label class="a-input__label">This is the label</label>

    <div class="a-input__holder">
      <input class="a-input__value" type="search" placeholder="placeholder text"/>
    </div>
  </div>

  
  <div class="a-input a-input--no-label a-input--search">

    <label class="a-input__label">This is the label</label>

    <div class="a-input__holder">
      <input class="a-input__value" type="search" placeholder="placeholder text"/>
    </div>
  </div>

Select 


      
        
      
	

	<div class="a-input a-input--select ">
		<div class="a-input__holder">

			<label for="styleguide-select" class="a-input__label">Select input
				
			</label>

      <select class="a-input__value">
				<option class="a-input--select__placeholder" selected disabled>Selecteer een item</option>

				
					<option value="option1">option1</option>
				
					<option value="option2">option2</option>
				
					<option value="option3">option3</option>
				
			</select>
		</div>
	</div>

Text

A default text input. Can be used with the "--no-label" modifier to hide the label visually 




      
        
      

  

  <div class="a-input ">

    <label class="a-input__label">This is the label</label>

    <div class="a-input__holder">
      <input class="a-input__value" type="text" placeholder="placeholder text"/>
    </div>
  </div>

  

  <div class="a-input a-input--no-label">

    <label class="a-input__label">This is the label</label>

    <div class="a-input__holder">
      <input class="a-input__value" type="text" placeholder="placeholder text"/>
    </div>
  </div>

This is a title

this is usage documentation is written in markdown