Forms

Download

You can fetch Trowel Forms with npm, yarn or bower.

# With bower
$ bower install --save trowel-forms

# With npm
$ npm install --save trowel-forms

# With yarn
$ yarn add trowel-forms

You can also download a zip archive right here.

Installation

SCSS

The main scss file to include to your main .scss file is located at the ./src/scss/forms.scss. As a Trowel Component, it also requires two dependencies to compile the scss code. Here an scss installation snippet.

// Trowel core (need to be imported first)
@import './path/to/dependencies/trowel-core/src/trowel';

// Trowel Forms
@import './path/to/dependencies/trowel-forms/src/scss/forms';

Twig files

The twig template ready to be include or embed is located at ./src/twig/Forms.html.twig.

Usage

Form group

Here is the basic structure for form elements

<div class="form-group">
  <label class="form-group__label" for="input-example-1">label</label>
  <input class="form-group__input" id="input-example-1" type="text">
</div>

Works too with <textarea> instead of <input> tag

<div class="form-group">
  <label class="form-group__label" for="input-example-2">label</label>
  <textarea class="form-group__input" id="input-example-2"></textarea>
</div>

Checkbox

Checkbox component customize the native input[type="checkbox"] element in order to make it look as you wish with trowel variables.

Checkout all the checkbox trowel variables to design it as you wish

<div class="form-group">
  <label class="checkbox">
    <input class="checkbox__native" type="checkbox">

    <span class="checkbox__indicator"></span>
    Hello world !
  </label>
</div>

Radio

Like checkboxes, radio component customize the native input[type="radio"] element in order to make it look as you wish with trowel variables.

Checkout all the radio trowel variables to design it as you wish

<div class="form-group">
  <label class="radio">
    <input class="radio__native" type="radio" name="radio-example">

    <span class="radio__indicator"></span>
    Hello world !
  </label>
</div>

<div class="form-group">
  <label class="radio">
    <input class="radio__native" type="radio" name="radio-example">

    <span class="radio__indicator"></span>
    Hello world !
  </label>
</div>

Select

Put a the .select__native class to the <select> element, wrap it in a .select container and you will get a custom select component fully customizable with trowel-variables

Select all the select trowel variables to design it as you wish

<div class="form-group">
  <div class="select">
    <select class="select__native">
      <option selected>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
</div>

Sass reference

Syntax variables

You can override the global syntax config for a specific component with the following variables

Enables

You can avoid the generation of some css with the following variables

Component variables

Form group

Checkbox

Radio

Select