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.

<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

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

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




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.

Therefore, <label>s are a requirement and must be placed after the <input>s. Also you need to append .checkbox or .radiobox classes to each <input>s for correct appearance.

.dark classes on parent elements are supported for darker check/radiobox style variations.


Customizable options
// checkboxes & radioboxes
@checkbox-size: 20px;
@checkbox-border-width: @input-border-width; //2px
@checkbox-border-radius: 100%;
@radiobox-border-radius: 100%;
@checkbox-color: @primary-accent-color;
@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>
    <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>

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

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-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
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-label-font-size: 0.8em;
@input-label-font-weight: 900;
@input-label-letter-spacing: 2px;
@input-line-height: 1.2;

Form Validation Requires JavaScript

Username is available!

That's a strange name...

Invalid Password.

Username is available!

That's a strange name...

Invalid Password.

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

<div class="form-group validation warning">
    <label class="form-label" for="name">Name</label>
    <div class="input-group">
        <input class="input" id="name" type="text" />
    </div>
    <p class="form-caption">That's a strange name...</p>
</div>

<div class="form-group validation error">
    <label class="form-label" for="password">Password</label>
    <div class="input-group">
        <input class="input" id="password" type="password" />
    </div>
    <p class="form-caption">Invalid Password.</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

Additionally, you can display feedback icons at the right of input boxes along with accented border colors. Add .validation-icons class on form group, then place the input inside an .input-group and the icons will appear.

To compensate for the spaces the icons take up, the state classes will append additional padding on the right side of the input box. Note that if the input box does not have a set width value or has width: auto;, (for example, when it's in an .form-inline), the input box width will visually shift when the icons or spinners are added. Make sure you manually set the widths or use full-width form groups if you don't want this.

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 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-radius: @input-border-radius;
@selectbox-color: @primary-accent-color;
@selectbox-disable-shadows: false;
@include-selecter: true;