Form
Area to have components for your forms, with a simple style and with several opt
Common form
<div class="form">
<div class="double-field">
<div class="field">
<label for="" class="label">Name</label>
<input type="text" class="input" placeholder="John" />
</div>
<div class="field">
<label for="" class="label">Last name</label>
<input type="text" class="input" placeholder="Smith" />
</div>
</div>
<div class="field">
<label for="" class="label">Your email</label>
<input type="email" class="input" placeholder="example@example.com" />
</div>
<div class="field">
<label for="" class="label">Password</label>
<input type="text" class="input" placeholder="Password" />
</div>
<div class="field">
<label for="" class="label">Profession</label>
<div class="select">
<select defaultValue="" class="select-inner">
<option value="">...</option>
</select>
</div>
</div>
<div class="field">
<label for="" class="label">Skills</label>
<div class="check-group">
<div class="checkbox">
<input type="checkbox" id="html" class="checkbox" name="skill" />
<label for="html" class="label">HTML</label>
</div>
</div>
</div>
<div class="field">
<label for="" class="label">Gender</label>
<div class="radio-group">
<div class="radio">
<input type="radio" id="..." class="radio" name="..." />
<label for="..." class="label">...</label>
</div>
</div>
</div>
<div class="field">
<label for="" class="label">Message</label>
<textarea class="textarea" placeholder="Type your message here..."></textarea>
</div>
<div class="field field-button">
<button class="button button-primary">Send information</button>
</div>
</div>
Input with icons / buttons
<div class="field has-icon">
<label class="label">...</label>
<div class="input-icon">
<span class="icon"><icon/></span>
<input type="email" class="input" />
</div>
</div>
<div class="field has-button">
<label class="label">...</label>
<div class="input-button">
<input type="email" class="input" />
<button class="button button-secondary">...</button>
</div>
</div>
<div class="field has-select">
<label class="label">...</label>
<div class="input-select">
<select class="select-inner">
<option selected>...</option>
</select>
<input type="number" class="input" placeholder="0.00" />
</div>
</div>
<div class="field has-select-button">
<label class="label">...</label>
<div class="input-select-button">
<select class="select-inner">
<option selected>...</option>
</select>
<input type="number" class="input" placeholder="0.00" />
<button class="button button-tertiary">...</button>
</div>
</div>
Input styles
<div class="field">
...
<input type="text" class="input is-flat" placeholder="..." />
</div>
<!-- or -->
<div class="field">
...
<input type="text" class="input is-full-rounded" placeholder="..." />
</div>
Input sizes
<div class="field">
...
<input type="text" class="input is-small" placeholder="..." />
</div>
<!-- or -->
<div class="field">
...
<input type="text" class="input is-large" placeholder="..." />
</div>
Toggle - Switch radio/checkbox buttons
Radio
Default color
is-secondary
is-tertiary
Disabled input
<div class="field">
<div class="radio is-toggle">
<input type="radio" id="..." class="radio" name="..." />
<label for="..." class="label"></label>
</div>
</div>
<div class="field">
<div class="radio is-toggle is-secondary">
...
</div>
</div>
Checkbox
Default color
is-secondary
is-tertiary
Disabled input
<div class="field">
<div class="checkbox is-toggle">
<input type="checkbox" id="..." class="checkbox" name="..." />
<label for="..." class="label"></label>
</div>
</div>
<div class="field">
<div class="checkbox is-toggle is-secondary">
...
</div>
</div>
Inputs description
This works for input, select and textarea. Just need to add necessary classes.
Please add a valid name.
<div class="field">
<label class="label">Name</label>
<input type="text" class="input" placeholder="Name" />
<span class="desc">Please add a valid name.</span>
</div>
Input with datalist
A simple way to add a datalist and filter.
<div class="field">
<label class="label">Select time</label>
<input type="text" class="input" placeholder="Select time" list="datalist" />
<datalist id="datalist">
<option value="15 mnts" />
<option value="20 mnts" />
<option value="30 mnts" />
<option value="45 mnts" />
<option value="60 mnts" />
<option value="60+ mnts" />
</datalist>
</div>
Textarea sizes
<div class="field">
<textarea class="textarea is-small" />
</div>
<div class="field">
<textarea class="textarea" />
</div>
<div class="field">
<textarea class="textarea is-large" />
</div>
Inputs error, success, warning
This works for input, select and textarea. Just need to add necessary classes.
Please add a valid name.
<div class="field">
<input type="text" class="input error" />
<span class="error-message">...</span>
</div>
The name is correct.
<div class="field">
<input type="text" class="input success" />
<span class="success-message">...</span>
</div>
This name has been taken.
<div class="field">
<input class="input warning" />
<span class="warning-message">...</span>
</div>>
Accent color for checkbox and radio
To use these accent colors, you need to add the class is-primary, is-secondary, or is-tertiary on top of the form or div tag as a parent, and ready.
Input / Select / Textarea / Radio / Checkbox
<div class="field">
<label class="label">Input</label>
<input type="text" class="input" placeholder="Name" />
</div>
<div class="field">
<label class="label">Select</label>
<div class="select">
<select class="select-inner">
<option value="">...</option>
</select>
</div>
</div>
<div class="field">
<div class="radio">
<input type="radio" id="radio" class="radio" name="radio" />
<label for="radio" class="label">Radio</label>
</div>
</div>
<div class="field">
<div class="checkbox">
<input type="checkbox" id="checkbox" class="checkbox" name="checkbox" />
<label for="checkbox" class="label">Checkbox</label>
</div>
</div>
<div class="field">
<label class="label">Textarea</label>
<textarea class="textarea" placeholder="..."></textarea>
</div>