Form advanced

Apply a custom style to radio and checkbox inputs when utilizing the Form component.

FatKit uses the appearance property to style them through CSS only, without applying custom markup. Currently the appearance property is only fully supported by webkit browsers, so that the styling will only apply to Chrome, Safari and Opera. This will change, of course, once other browsers start supporting the property.

info To use this component just uncomment the Sass include at the bottom of the /assets/styles/sass/elements/_form.scss file.


Usage

You can apply this component to extend the Form component. Just place the <input> element inside a <form> element and add the .f-form class.

Example

Markup

<form class="f-form">
	<input type="radio">
	<input type="checkbox">
</form>

Toggle

The form toggle allows you to turn any radio or checkbox in to a interactive toggle switch.

Example

Radio

Checkbox

Markup

<label class="f-input-toggle">
	<input type="checkbox">
	<span></span>
</label>

Modifiers

You can modify the style of the toggle switch by adding a modifier class:

Style

  • .f-input-toggle-success - To indicate success or a positive state
  • .f-input-toggle-warning - To indicate a warning or a potentially problematic state
  • .f-input-toggle-danger - To indicate a dangerous or harmfull state.

Size

  • Small .f-input-toggle-small
  • Default
  • Large .f-input-toggle-large
<label class="f-input-toggle f-input-toggle-danger">
	<input type="checkbox">
	<span></span>
</label>