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.

Please fill this field

This field is required

<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>

Radio Buttons

Use this component when you have a set of options and you can choose only one.

<div class="group">
	<label for="radio-button" class="radio">
		<input type="radio" name="option" id="radio-button" checked="checked">
		<span></span>
		option 1
	</label>
	<label for="radio-button-1" class="radio">
		<input type="radio" name="option" id="radio-button-1">
		<span></span>
		option 2
	</label>
</div>

Radio Disabled

Add class="is-disabled" and disabled="disabled" to make a disabled radio button.

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