Form elements
We have customized css components to build forms like: radio buttons, checkboxes etc.
Inputs
<form class="form" role="form">
<div class="group">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Your name...">
</div>
<div class="group">
<label for="password">Password</label>
<input type="text" id="password" placeholder="Your password...">
</div>
</form>
Vertical form
<form action="forms.html" class="form" role="form">
<div class="group">
<label for="username" class="block">Username</label>
<input type="text" id="username" placeholder="Your name...">
</div>
<div class="group">
<label for="password" class="block">Password</label>
<input type="text" id="password" placeholder="Your password...">
</div>
</form>
Block Form
<form action="forms.html" class="form block" role="form" style="width: 70%;">
<div class="group">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Your name...">
</div>
<div class="group">
<label for="password">Password</label>
<input type="text" id="password" placeholder="Your password...">
</div>
</form>
Textarea
<div class="form block" style="width: 70%" role="form">
<label for="message">Message</label>
<textarea id="message" rows="7">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
</div>
Unavailable inputs
Inputs only to show data.
Readonly
Add readonly="readonly"
attribute to make a readonly input.
Disabled
Add disabled="disabled"
attribute or class="is-disabled"
to make a disabled input.
Required fields
Fields who needs validation to proceed.
<form class="form block" style="width: 70%" role="form">
<div class="group valid">
<label>Username</label>
<input type="text" placeholder="Your username..." required="required" aria-required="required" />
<p class="text-error">Please fill this field</p>
</div>
<div class="group valid">
<label>Password</label>
<input type="password" placeholder="Your password..." required="required" aria-required="required" />
<p class="text-error">This field is required</p>
</div>
</form>
State Elements
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quas nihil dolore nobis rerum omnis vel, nisi aliquam, facere libero nostrum earum, perspiciatis voluptates! Expedita eius perspiciatis ut, corporis iure?
Checkboxes
Use those elements when you have multiple choices and you can choose many options.
<div class="form" role="form">
<div class="group">
<label for="checkbox-0" class="checkbox">
<input type="checkbox" id="checkbox-0" checked="checked">
<span></span>
Checkbox 1
</label>
</div>
<div class="group">
<label for="checkbox-1" class="checkbox">
<input type="checkbox" id="checkbox-1">
<span></span>
Checkbox 2
</label>
</div>
<div class="group">
<label class="checkbox">
<input type="checkbox">
<span></span>
Checkbox Disabled
</label>
</div>
<div class="group">
<label class="checkbox is-disabled">
<input type="checkbox" disabled="disabled" checked="checked">
<span></span>
Checkbox Disabled Checked
</label>
</div>
</div>
Switches
Use those elements when you a have an on/off option.
<div class="group">
<label for="switch-circle" class="switch">
Keep me logged in:
<input type="checkbox" id="switch-circle" />
<span></span>
</label>
</div>
Switch variations
Add class="square"
to make a round switch.
Flat Style
Add class="flat"
to make a switch with flat style.
Switch Size
Add class="large"
to make a big switch.
Big switch:
Mobile Input elements
We can use those components to create "mobile like" input elements.
<form class="form block" role="form">
<div class="group mobile">
<label>Username</label>
<input type="text" placeholder="Your username..." >
</div>
<div class="group mobile">
<label>Message</label>
<textarea rows="7" placeholder="Type a message..."></textarea>
</div>
<div class="group">
<button type="button" class="btn primary has-effect">Send</button>
</div>
</form>
Issues
Bug or features request? Open an Issue