Menu

Component: Form

Basic input

<div class="input">
  <label for="name">Name</label>
  <input type="text" placeholder="Sciampagna Loïc" id="name" name="name"  />
</div>

Disabled input

<div class="input is-disabled">
  <label for="name">Name</label>
  <input type="text" placeholder="Sciampagna Loïc" id="name" name="name" disabled />
</div>

Input with icon

<div class="input">
  <label for="name">Name</label>
  <div class="icon fa-user">
    <input type="text" placeholder="Sciampagna Loïc" id="name" name="name"  />
  </div>
</div>

Search

<div class="input-search">
	<input type="text" />
	<button type="button" class="btn bg-main-color">Search</button>
</div>

Input animation

<div class="input-animation">
	<label form="input">Input</label>
	<input type="text" id="input" name="input" />
</div>

Switch


<div class="input-switch">
	<input type="checkbox" id="switch" />
	<label for="switch"><span>Input switch </span></label>
</div>
<div class="input-switch is-disabled">
	<input type="checkbox" id="switch128" disabled />
	<label for="switch128"><span>Input switch disabled</span></label>
</div>

Checkbox

<div class="input-checkbox">
	<label for="checkbox1000">Lorem ipsum</label>
	<input type="checkbox" id="checkbox1000" />
</div>
<div class="input-checkbox is-disabled">
	<label for="checkbox856">Lorem ipsum</label>
	<input type="checkbox" id="checkbox856" disabled/>
</div>

Custom checkbox

<div class="custom-input-checkbox">
	<input type="checkbox" id="checkbox2" />
	<label for="checkbox2">Lorem ipsum</label>
</div>
<div class="custom-input-checkbox is-disabled">
	<input type="checkbox" id="checkbox789" disabled/>
	<label for="checkbox789" >Lorem ipsum</label>
</div>

Checkbox horizontal

<div class="group-inputs horizontal">
	<div class="input-checkbox">
		<label for="checkbox3">Lorem ipsum</label>
		<input type="checkbox" id="checkbox3" />
	</div>
	<div class="input-checkbox">
		<label for="checkbox4">Lorem ipsum</label>
		<input type="checkbox" id="checkbox4" />
	</div>
</div>

Checkbox vertical

<div class="group-inputs">
	<div class="input-checkbox">
		<label for="checkbox5">Lorem ipsum</label>
		<input type="checkbox" id="checkbox5" />
	</div>
	<div class="input-checkbox">
		<label for="checkbox6">Lorem ipsum</label>
		<input type="checkbox" id="checkbox6" />
	</div>
</div>

Radio button

<div class="input-radio">
	<label for="radio1">Lorem ipsum</label>
	<input type="radio" id="radio1" />
</div>

Custom Radio button

<div class="custom-input-radio">
	<input type="radio" id="radio2" />
	<label for="radio2">Lorem ipsum</label>
</div>
<div class="custom-input-radio is-disabled">
	<input type="radio" id="radioCustom123" disabled />
	<label for="radioCustom123">Lorem ipsum</label>
</div>

Radio buttons horizontal

<div class="group-inputs horizontal">
	<div class="input-radio">
		<label for="radio3">Lorem ipsum</label>
		<input type="radio" id="radio3" name="radio1[]" />
	</div>
	<div class="input-radio">
		<label for="radio4">Lorem ipsum</label>
		<input type="radio" id="radio4" name="radio1[]" />
	</div>
</div>

Radio buttons vertical

<div class="group-inputs">
	<div class="input-radio">
		<label for="radio5">Lorem ipsum</label>
		<input type="radio" id="radio5" name="radio2[]" />
	</div>
	<div class="input-radio">
		<label for="radio6">Lorem ipsum</label>
		<input type="radio" id="radio6" name="radio2[]" />
	</div>
</div>

Select

<div class="custom-select">
	<select>
		<option>Lorem ipsum</option>
		<option>Lorem ipsum</option>
		<option>Lorem ipsum</option>
		<option>Lorem ipsum</option>
	</select>
</div>

Basic form

<form class="grid-flex">
	<div class="column w-50">
		<div class="input-animation">
			<label for="first-name">First name</label>
			<input type="text" id="first-name" name="first-name" required />
		</div>
	</div>
	<div class="column w-50">
		<div class="input-animation">
			<label for="last-name">Last name</label>
			<input type="text" id="last-name" name="last-name" required />
		</div>
	</div>
	<div class="column w-100">
		<div class="input-animation">
			<label for="email">Email</label>
			<input type="email" id="email" name="email" required />
		</div>
	</div>
	<div class="column w-100">
		<div class="input-animation">
			<label for="subject">Subject</label>
			<input type="text" id="subject" name="subject" required />
		</div>
	</div>
	<div class="column w-100">
		<div class="input-animation textarea">
			<label for="message">Message</label>
			<textarea id="message" name="message" required></textarea>
		</div>
	</div>
	<div class="column w-100">
		<div class="custom-input-checkbox">
			<input type="checkbox" id="checkbox-rules" />
			<label for="checkbox-rules">I accept <a href="http://www.google.fr" target="_blank">the rules.</a></label>
		</div>
	</div>
	<div class="column w-100">
		<button type="submit" class="btn bg-main-color icon-send">Send</button>
	</div>
</form>