Form Elements

forms.less

Input boxes

Add .input class to an <input> element to apply the design.

Textarea

Add the same .input class to a <textarea> for the same design.

On textareas you can use additional .resize-horizontal and .resize-vertical classes to limit form resizing directions.


Form groups

Enter your email address.

Submit 
<form>
  <div class="form-group">
    <label class="form-label" for="demoFormEmail">Email</label>
    <input class="input" id="demoFormEmail" type="email" placeholder="Email" />
    <p class="form-caption">Enter your email address.</p>
  </div>
  <div class="form-group">
    <label class="form-label" for="demoFormPassword">Password <span class="form-caption">- Inline captions inside labels are fine too.</span></label>
    <input class="input" id="demoFormPassword" type="password" placeholder="Password" />
  </div>
  <div class="form-group">
    <label class="form-label" for="demoFormComments">Comments</label>
    <textarea class="input" name="demoFormComments" id="demoFormComments" cols="30" rows="10"></textarea>
  </div>
  <div class="form-group">
    <a class="btn">Submit</a>
  </div>
</form>

Include <label>s and <input>s inside a .form-group to have them stretch across the container as block elements.

Add .form-caption class for captions.


Inline form groups

Submit 
<form class="form-inline">
  <div class="form-group">
    <label class="form-label" for="demoForm2Email">Email</label>
    <input class="input" id="demoForm2Email" type="email" placeholder="Email" />
  </div>
  <div class="form-group">
    <label class="form-label" for="demoForm2Password">Password</label>
    <input class="input" id="demoForm2Password" type="password" placeholder="Password" />
  </div>
  <div class="form-group">
    <a class="btn">Submit</a>
  </div>
</form>
<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <label class="input-addon" for="demoForm2firstname">First Name</label>
      <input class="input" id="demoForm2firstname" type="text" />
    </div>
  </div>
  <div class="form-group">
    <div class="input-group">
      <label class="input-addon" for="demoForm2lastname">Last Name</label>
      <input class="input" id="demoForm2lastname" type="text" />
    </div>
  </div>
</form>

Append .form-inline class to a parent container to put .form-groups in one line. You need to apply paddings and margins manually.


Horizontal form group

Enter your email address.

Submit 
<form class="form-horizontal">
  <div class="form-group">
    <div class="col-5">
      <label class="form-label" for="demoFormHorizontalEmail">Email</label>
    </div>
    <div class="col-5 colspan-4">
      <input class="input" id="demoFormHorizontalEmail" type="email" placeholder="Email" />
      <p class="form-caption">Enter your email address.</p>
    </div>
  </div>
  <div class="form-group">
    <div class="col-5">
      <label class="form-label" for="demoFormHorizontalPassword">Password</label>
    </div>
    <div class="col-5 colspan-4">
      <input class="input" id="demoFormHorizontalPassword" type="password" placeholder="Password" />
    </div>
  </div>
  <div class="form-group">
    <div class="col-5">
      <label class="form-label" for="demoFormHorizontalComments">Comments</label>
    </div>
    <div class="col-5 colspan-4">
      <textarea class="input" name="demoFormHorizontalComments" id="demoFormHorizontalComments" cols="30" rows="10"></textarea>
    </div>
  </div>
  <div class="form-group">
    <div class="col-5">
    </div>
    <div class="col-5 colspan-4">
      <a class="btn">Submit</a>
    </div>
  </div>
</form>

Add a .form-horizontal class to the enclosing <form> or <div> for a row-and-column layout. Then insert .col-x columns as you would for an ordinary column layout. You don't need to add .rows here because the .form-groups inside a horizontal forms automatically gain the styles that the .rows have.

One difference is that columns placed inside a horizontal form are automatically applied with the .collapse-gutter setting to save space inbetween.


Input groups

@
@
.somesite.com 
<form>
  <div class="form-group">
    <label class="form-label" for="demoForm3Username">Username</label>
    <div class="input-group">
      <!-- input addon up front -->
      <span class="input-addon">@</span>

      <!-- input -->
      <input class="input" id="demoForm3Username" type="text" />

      <!-- input addon button -->
      <span class="input-addon-btn">
        <button class="btn green">Check</button>
      </span>
    </div>
  </div>
</form>

Input groups are used when you want to put form elements like input fields, buttons or text as addons in one line blocks. .input-group uses flexbox for layout so child components will stretch appropriately and keep same height if any sibling element happens to be larger than the other.

Place .input-addon class blocks before or after the input. Enclose them with a .input-group container.

To place a button in an input group, use .input-addon-btn instead.


Special States

Placeholder Text

You can use disabled and readonly attributes on the <input>s.

There is also a .form-placeholder class you can use on a non-input element to position a static text inside a form layout.


Customizable options
// forms
@input-border-width: 2px;
@input-border-color: @gray;
@input-border-radius: 0;
@input-bg-color-light: @background-color-light;
@input-bg-color-dark: @background-color-dark;
@input-font-size: 0.9em;
@input-textarea-font-size: 0.8em;
@input-line-height: 1.2;
@form-label-uppercase: true;
@form-label-font-size: 0.8em;
@form-label-font-weight: 900;
@form-label-letter-spacing: 0.1em;
@form-caption-font-size: 0.8em;
@form-caption-color: fadeout(@gray,30%);
@input-spinner-color: @primary-accent-color;
@input-spinner-animation-duration: 0.4s;
@input-html5-validation-styles: true;



Checkboxes and Radioboxes

<!-- Checkbox -->
<input class="checkbox" type="checkbox" id="demoCheck1" checked disabled>
<label for="demoCheck1">Checkbox 1</label>

<!-- Radiobox -->
<input class="radiobox" type="radio" name="demoRadio" id="demoRadio1" checked>
<label for="demoRadio1">Radiobox 1</label>

Custom checkbox and radiobox styles uses CSS3 :after and :before pseudo elements to override default browser appearance.

To apply the styles, place a <label> right next to the <input> with the checkbox/radio type attribute. Then add .checkbox or .radiobox classes to <input>s.


Customizable options
// checkboxes & radioboxes
@checkbox-size: 20px;
@checkbox-border-width: @input-border-width; //2px
@checkbox-check-thickness: @input-border-width; //2px
@checkbox-border-color: @gray;
@checkbox-border-radius: 100%;
@radiobox-border-radius: 100%;
@checkbox-color: @primary-accent-color;
@checkbox-bg-color-light: @background-color-light;
@checkbox-bg-color-dark: lighten(@background-color-dark,10%);
@checkbox-disable-transition: false;

Switches

OFF
ON
Cats
Dogs
Skip Tuesdays
OFF
ON
Activate
Activate 
<div class="form-group">
  <label class="form-label">ON/OFF Type Switch</label>
  <div class="chk-switch-wrap">
    <span class="chk-switch-label">OFF</span>
    <div class="chk-switch onoff-type">
      <input type="checkbox" id="demoSwitch1" checked>
      <label for="demoSwitch1"><span></span></label>
    </div>
    <span class="chk-switch-label">ON</span>
  </div>
</div>

"Switch" style toggles using checkboxes. span.chk-switch-label is optional. You must have the .chk-switch and the markup inside for the switch to work. Wrap the label and switch with .chk-switch-wrap if you want to center-align the text and the switch.

Options for .chk-switch
  • .onoff-type : ON-OFF type toggle
  • .onoff-type.led : ON-OFF type toggle with a LED light indicator on the ticker
  • .ab-type : A/B-type toggle without the switch background color.
  • .disabled AND :disabled attribute on input : Disable switch
  • .align-right : Align switch to the right

Customizable options
// switch toggle
@chk-switch-size: 24px;
@chk-switch-border-width: @input-border-width; //2px
@chk-switch-border-color: @input-border-color;
@chk-switch-border-radius: @checkbox-size;
@chk-switch-color: @primary-accent-color;
@chk-switch-disable-transition: false;
@chk-switch-disable-shadows: false;

Disabling whole form groups

Enter your email address.

Switch
Submit
Toggle Fieldset Disable

Put form-groups and elements inside <fieldset> with a disabled attribute to disable the whole block.

This will apply disabled styles to Input, Textarea, Buttons, Checkboxes and Check Switches. Buttons with .btn classes on an a element instead of button will be disabled as well, but since it only prevents click through the pointer-events: none CSS property, for safety use Javascript to completely disable interaction.


Customizable options

// forms
@input-border-width: 2px;
@input-border-radius: 0;
@input-font-size: 0.9em;
@input-textarea-font-size: 0.8em;
@input-line-height: 1.2;
@form-label-uppercase: true;
@form-label-font-size: 0.8em;
@form-label-font-weight: 900;
@form-label-letter-spacing: 0.1em;
@form-caption-font-size: 0.8em;

Form Validation Requires JavaScript

Username is available!

That's a strange name...

Invalid Password.

Username is available!

That's a strange name...

Invalid Password.

<!-- Just border colors -->
<div class="form-group validation valid">
  <label class="form-label" for="username">Username</label>
  <input class="input" id="username" type="text" />
  <p class="form-caption">Username is available!</p>
</div>

<!-- With validation icons -->
<div class="form-group validation validation-icons valid">
  <label class="form-label" for="username">Username</label>
  <div class="input-wrap">
    <input class="input" id="username" type="text" />
  </div>
  <p class="form-caption">Username is available!</p>
</div>

Petal offers validation state styles for form inputs. Add .validation class and appropriate state classes .valid, .warning, .error classes to .form-group to override border colors. You need to use custom JavaScript for actual validation of contents and append appropriate state classes to HTML elements.

Feedback Icons

To show feedback icons at the right side of input boxes, add .validation-icons class on form-group, then wrap the input with an .input-wrap. Padding will be automatically added to the input to compensate for space where the icon will be displayed.

In versions prior to 0.10.0, .input-group was used for wrapping inputs. This caused problems when nesting inputs in input-groups combined with inline buttons, so it was changed to .input-wrap. If you've upgraded to 0.10.0+ and validation icons don't appear anymore, just change the existing .input-group to .input-wrap.

Colored Caption Texts

Caption message texts (.form-caption) inside a form group with the validation classes will be also colored following the the validation states.


Checkbox and Radiobox validation

<div class="form-group">
  <input type="checkbox" id="checkbox" class="checkbox validation error" required>
  <label for="checkbox">I agree to terms of service.</label>
</div>

For checkboxes and radioboxes, only .error state style is available. You can use this when you want to highlight checkboxes as invalid when they have required attribute and user should check (or uncheck) to proceed. Note that unlike form inputs, checkboxes take the .validation.error class on <input> rather than on parent .form-groups. (In other words, checkboxes and radioboxes do not require parent form-groups for validation style.


Disabling HTML5 default validation states

Petal by default setting includes style overrides for HTML5 form validation attribute :invalid. So if the browser supports native validation of inputs, Petal will target :invalid pseudo-class and display the border color as red. This is convenient when you want a simple visual validation you can use on the fly, but if your project has a more sophisticated validation system of your own the :invalid state style may interfere with custom validation class styles (for example, if you want to not show invalid state when input is yet untouched). In such cases, you can choose not to output :invalid related style overrides on build by setting the @input-html5-validation-styles global variable to false.


Customizable options

@input-html5-validation-styles: true;

Spinner in inputs Requires JavaScript

Caption Message

Caption Message

<div class="form-group validation validation-icons loading">
  <div class="input-group">
    <input class="input" id="demoFormSpinner1" type="text" />
  </div>
</div>

When you need a loading indicator inside a input box. Place the input inside an .input-group, and append the .loading class on the input group when you want to display the spinner.

The .loading class can be used stand-alone or along with the .validation class. When using .loading class on .validation, the loading spinner will always override the validation state icons.


Customizable options

@input-spinner-color: @primary-accent-color;
@input-spinner-animation-duration: 0.4s;

Segmented Buttons (Radiobox method)

<div class="btn-group btn-group-segmented">
  <input type="radio" name="demoSegmented" id="demoSegmented1" checked>
  <label for="demoSegmented1"><div class="btn hollow">Option 1</div></label>

  <input type="radio" name="demoSegmented" id="demoSegmented2">
  <label for="demoSegmented2"><div class="btn hollow">Option 2</div></label>

  <input type="radio" name="demoSegmented" id="demoSegmented3">
  <label for="demoSegmented3"><div class="btn hollow">Option 3</div></label>

  <input type="radio" name="demoSegmented" id="demoSegmented4" disabled>
  <label for="demoSegmented4"><div class="btn hollow">Option 4</div></label>
</div>

This method uses radio buttons to make segmented button groups toggle function work without using JavaScript.

Use the same .btn-group-segmented class on the button group, insert the buttons inside a <label> which must be placed directly after the <input type="radio"> .

Add disabled attribute on <input> to disable the button.


Selectboxes 


<select name="selectbox" id="demoSelectbox" class="select">
  <option>Lorem</option>
  <option>ipsum</option>
  <option>dolor</option>
  <option>sit</option>
  <option>amet</option>
  <option>consectetur</option>
</select>

Use .select class on <select> to style the selectbox. Without JavaScript however, styling a selectbox is very limited and so only the dropdown box will be styled. Dropdown menu will follow default native styles depending on your browser/platform and will differ in appearance. For consistent styling across all platforms, use the JavaScript method below.

Use .stretch class to make selectbox width to 100%.


Selectboxes (Selecter) Requires JavaScript 

<select name="selectbox3" id="demoSelectbox3" class="selectbox cover bottom" multiple disabled>
  <option>Lorem</option>
  <option>ipsum</option>
  <option>dolor</option>
  <option>sit</option>
  <option>amet</option>
  <option>consectetur</option>
</select>

To style a selectbox completely, JavaScript must be used to replace existing <select> because a <select> element is very limited in terms of CSS. Petal implemented selectbox styles using Selecter jQuery Plugin by Ben Plum (MIT License). The javascript file is included as-is in petal.js, but the CSS code is completely customized to fit the Petal style.

The Selecter plugin is not activated by default because of possible usability issues. To initialize, include the line of code below in your site page (change the selector to whichever selectbox you want to apply to).

$(".myclass1 select.selectbox").selecter();

Then append the .selectbox class to properly apply styles.

Refer to the Selecter documentation page for more options.

If you are not planning to use Selecter in your project, you can turn it off by setting the @include-selecter variable to false. When this is switched off, the relevant code will not be included in compiled code thus saving some file size.


Customizable options
// selectbox
@selectbox-border-width: @input-border-width; //2px
@selectbox-border-color: @input-border-color;
@selectbox-border-radius: @input-border-radius;
@selectbox-color: @primary-accent-color;
@selectbox-bg-color-light: @background-color-light;
@selectbox-bg-color-dark: @background-color-dark;
@selectbox-menu-bg-color-light: @background-color-light;
@selectbox-menu-bg-color-dark: lighten(@background-color-dark,13%);
@selectbox-disable-shadows: false;
@include-selecter: true;
Back to top