Input

/../hex-core/src/core/_forms.scss

Basic inputs to build forms.

<input name="test" placeholder="This is a test" />

Select

/../hex-core/src/core/_forms.scss

Selectors are a bit different in Safari. We can't remove the gloss effect without using the -webkit-appareance hack.

<select name="test">
  <option>Select one element</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option disabled>Option 3</option>
</select>

Textarea

/../hex-core/src/core/_forms.scss
<textarea>
This is a test
</textarea>

Labels

/../hex-core/src/core/_forms.scss
<label for="test">Label for input</label>
<input name="check" id="test" placeholder="test" />

Checkbox

/../hex-core/src/core/_forms.scss
<label for="check1" class="checkbox">
  <input type="checkbox" name="check1" id="check1" />
  <span>Test</span>
</label>
<label for="check2" class="checkbox">
  <input type="checkbox" name="check2" id="check2" disabled />
  <span>Disabled</span>
</label>

Radio

/../hex-core/src/core/_forms.scss
<label for="test1" class="radio">
  <input type="radio" name="test" id="test1"/>
  <span>Test 1</span>
</label>
<label for="test2" class="radio">
  <input type="radio" name="test" id="test2"/>
  <span>Test 2</span>
</label>
<label for="test3" class="radio">
  <input type="radio" name="test" id="test3"/>
  <span>Test 3</span>
</label>
<label for="test4" class="radio">
  <input type="radio" name="test" id="test4" disabled/>
  <span>Disabled</span>
</label>

Buttons

/../hex-core/src/core/_forms.scss
Link button
<a class="button" href="#">Link button</a>
<button class="button">Submit</button>
<input type="submit" value="Input Submit" class="button"/>
<button class="button" disabled="disabled">Disabled</button>
<button class="button" disabled>Disabled too</button>