There is a newer version of Luda.

Let's go!

Form

Form elements are essential when collecting data from users. Luda makes it easy to create and control beautiful form elements.

Input Elements

In Luda, style classes are not added to <input> tags directly, we add them to containers instead. It’s more flexible to control and extend input element styles in this way. An input element is wrapped in a container which has the .fm class, we can combine different input style classes to create various kinds of input elements.

Text Field and Text Area

Add the .fm-text class to the .fm container to create a text filed or a text area.

<!-- Wrap an <input> -->
<div class="fm fm-text">
  <input name="form_example1" placeholder="E.g., A text field">
</div>
<!-- Wrap a <textarea> -->
<div class="fm fm-text">
  <textarea name="form_example2" placeholder="E.g., A text area"></textarea>
</div>

Search Field

Add the .fm-search class to the .fm container to create a search filed, an <input> tag suppots typing texts should be wrapped inside.

<div class="fm fm-search">
  <input type="search" name="form_example3" placeholder="Search anything">
</div>

Select Field

Add the .fm-select class to the .fm container to create a select field, a <select> tag should be wrapped inside. Default selected <options> can be set by adding the selected attribute.

<!-- A select field -->
<div class="fm fm-select">
  <select name="form_example4" placeholder="E.g., Male">
    <option value="male">Male</option>
    <option value="female">Female</option>
  </select>
</div>
<!-- A multiple select filed with a default selected option -->
<div class="fm fm-select">
  <select multiple name="form_example5">
    <option value="en" selected>English</option>
    <option value="zh">Chinese</option>
  </select>
</div>

Select Options in Javascript

// @example Select a specific option of a single select field
// by passing in the option's value.
luda('#my-select select').val('value')
// @example Select specific options of a multiple select field
// by passing in an array which contains the options' values.
luda('#my-select select').val(['valueOne', 'valueTwo'])
// @example Select no options.
luda('#my-select select').val(null)

Listen Selected Changes

// @example Do something after a single select fileld selected
// option chagned.
luda(document).on('luda:fmSelect:changed', '#my-select', function(event, data){
  console.log(data.value) // The selected value.
  console.log(data.selected) // The selected option element.
})
// @example Do something after a multiple select filed selected
// options chagned.
luda(document).on('luda:fmSelect:changed', '#my-select', function(event, data){
  console.log(data.value) // The selected values in an array.
  console.log(data.selected) // The selected option elements in an array.
})

File Picker

Add the .fm-file class to the .fm container to create a file picker, an <input type="file"> tag should be wrapped inside. The value attribute of the wrapped <input> can be used to set a default value.

<!-- A file picker -->
<div class="fm fm-file">
  <input type="file" name="form_example6" placeholder="E.g., my_resume.pdf">
</div>
<!-- A file picker can pick up multiple files with a default initial value -->
<div class="fm fm-file">
  <input type="file" multiple name="form_example7" value="luda.min.js">
</div>

Reset in Javascript

// @example Reset a file picker.
luda('#my-file [type=file]').val(null)

Listen File Changes

// @example Do something after a single file fileld file changed.
luda(document).on('luda:fmFile:changed', '#my-file', function(event, file){
  console.log(file) // The selected file.
})
// @example Do something after a multiple file filed files changed.
luda(document).on('luda:fmFile:changed', '#my-file', function(event, files){
  console.log(files) // The selected files in an array.
})

Checkbox

Add the .fm-check class to the .fm container to create checkboxes, one or more <input type="checkbox"> tags can be wrapped inside.

<div class="fm fm-check">
  <label><input type="checkbox" name="form_example8" value="1">Checkbox one</label>
  <label><input type="checkbox" name="form_example8" value="2">Checkbox two</label>
</div>

Radio

Add the .fm-radio class to the .fm container to create radios. Just like creating checkboxes, one or more <input type="radio"> tags can be wrapped inside.

<div class="fm fm-radio">
  <label><input type="radio" name="form_example9" value="1">Radio one</label>
  <label><input type="radio" name="form_example9" value="2">Radio two</label>
</div>

Range Slider

Add the .fm-range class to the .fm container to create a range slider, an <input type="range"> tag should be wrapped inside.

<div class="fm fm-range">
  <input type="range">
</div>

Input States

The state of an input element can be controlled by adding state attributes.

Readonly

The readonly attribute pervents input elements from responding to user actions. To make an input element readonly, add the readonly attribute to itself and its .fm container.

<!-- A readonly text field -->
<div class="fm fm-text" readonly>
  <input readonly name="example11" value="I'm readonly">
</div>
<!-- A readonly checkbox -->
<div class="fm fm-check" readonly>
  <label><input readonly checked type="checkbox" name="example12" value="example">A readonly checkbox</label>
</div>
<!-- A readonly select field -->
<div class="fm fm-select" readonly>
  <select readonly name="example13">
    <option selected="selected" value="male">Male</option>
    <option value="female">Female</option>
  </select>
</div>

Disabled

An input element which has the disabled attribute cannot respond to user actions nor submitted. To disable an input element, add the disabled attribute to itself and its .fm container.

<!-- A disabled search field -->
<div class="fm fm-search" disabled>
  <input disabled name="example14" value="I'm disabled">
</div>
<!-- A disabled radio -->
<div class="fm fm-radio" disabled>
  <label><input disabled type="radio" name="example15" value="example">This radio is disabled</label>
</div>
<!-- A disabled file picker -->
<div class="fm fm-file" disabled>
  <input disabled type="file" name="example16" value="This file picker is disabled">
</div>

Input Element Modifiers

The size of input elements can be changed by adding size modifier classes.

.fm-smallModifier

If you want a smaller input element, add the .fm-small class to its .fm container.

<!-- A small checkbox -->
<div class="fm fm-check fm-small">
  <label><input type="checkbox" name="example17" value="example">A small form checkbox</label>
</div>
<!-- A small range slider -->
<div class="fm fm-range fm-small">
  <input type="range">
</div>
<!-- A small search field -->
<div class="fm fm-search fm-small">
  <input name="example18" placeholder="Search anything...">
</div>
<!-- A small textarea -->
<div class="fm fm-text fm-small">
  <textarea name="example19" placeholder="E.g., Once upon a time..."></textarea>
</div>

.fm-largeModifier

The size of an input element can be larger by adding the .fm-large class to its .fm container.

<!-- A large radio -->
<div class="fm fm-radio fm-large">
  <label><input type="radio" name="example20" value="example">A large form radio</label>
</div>
<!-- A large file picker -->
<div class="fm fm-file fm-large">
  <input type="file" name="example21" placeholder="E.g., my_resume.pdf">
</div>
<!-- A large text filed -->
<div class="fm fm-text fm-large">
  <input name="example22" placeholder="E.g., Once upon a time...">
</div>
<!-- A large select field -->
<div class="fm fm-select fm-large">
  <select multiple name="example23">
    <option value="en">English</option>
    <option value="zh">Chinese</option>
    <option value="ja">Japanese</option>
  </select>
</div>

.fm-inlineModifier

Luda form elements takes all available space in the horizontal by default. If you want to change this behavior, you can add the .fm-inline to their .fm containers.

<!-- An inline search field -->
<div class="fm fm-search fm-inline">
  <input type="search" name="example24" placeholder="Search anything...">
</div>
<!-- An inline file picker -->
<div class="fm fm-file fm-inline">
  <input type="file" name="example25" placeholder="E.g., my_resume.pdf">
</div>
<!-- An inline checkbox -->
<div class="fm fm-check fm-inline">
  <label><input type="checkbox" name="example26" value="example">An inline checbox</label>
</div>

Input Helpers

Luda provides form hint and error text helpers for showing hints and errors of input elements.

Hint Texts

Add the data-hint attribute to the .fm container to show hint texts. The value of this attribute shows at the bottom of the .fm container.

<!-- Show hint texts for the text field -->
<div class="fm fm-text" data-hint="Your email will be a secret.">
  <input type="email" name="example27" placeholder="E.g., oatwoatw@gmail.com">
</div>
<!-- Show hint texts for the radios -->
<div class="fm fm-radio" data-hint="Your gender also will be a secret.">
  <label><input type="radio" name="example28" value="male">Male</label>
  <label><input type="radio" name="example28" value="female">Female</label>
</div>

Error Texts

Add the data-error attribute to the .fm container to show error texts. The value of this attribute shows at the bottom of the .fm container.

A .fm container has both data-error attribute and data-hint attribute only shows the error texts.

<!-- Show error texts for the text field -->
<div class="fm fm-text" data-error="Email cannot be blank!">
  <input type="email" name="example29" placeholder="E.g., oatwoatw@gmail.com">
</div>
<!-- Show error texts for the radios -->
<div class="fm fm-radio" data-error="Please choose your gender!">
  <label><input type="radio" name="example30" value="male">Male</label>
  <label><input type="radio" name="example30" value="female">Female</label>
</div>

Form Label

The label element represents a caption for an item in a form.

Example

Add the .fm-label class to a <label> tag to create a caption for the text field.

<label class="fm-label" for="example31">Fullname</label>
<div class="fm fm-text">
  <input id="example31" name="example31" placeholder="E.g., James Bond">
</div>

Form Label Modifiers

You can change a label’s size and show the “Required” texts by using label modifier classes.

.fm-label-requiredModifier

Add the .fm-label-required class to show the “Required” text.

<label class="fm-label fm-label-required" for="example32">Fullname</label>
<div class="fm fm-text">
  <input id="example32" name="example32" placeholder="E.g., James Bond">
</div>

.fm-label-smallModifier

Add the .fm-label-small class to make the label smaller.

<label class="fm-label fm-label-small" for="example33">Fullname</label>
<div class="fm fm-text fm-small">
  <input id="example33" name="example33" placeholder="E.g., James Bond">
</div>

.fm-label-largeModifier

Add the .fm-label-large class to to make the label larger.

<label class="fm-label fm-label-large" for="example34">Fullname</label>
<div class="fm fm-text fm-large">
  <input id="example34" name="example34" placeholder="E.g., James Bond">
</div>

Sass Variables

Size

$form-element-inline-width-rem: baseline(22) !default
$form-element-small-inline-width-rem: baseline(18) !default
$form-element-large-inline-width-rem: baseline(26) !default
$form-element-height-rem: baseline(3) !default
$form-element-small-height-rem: baseline(2) !default
$form-element-large-height-rem: baseline(4) !default
$form-element-multiple-rows-height-rem: $form-element-height-rem * 3 !default

Default height of multiple select field and textarea.

$form-element-multiple-rows-small-height-rem: $form-element-small-height-rem * 3 !default
$form-element-multiple-rows-large-height-rem: $form-element-large-height-rem * 3 !default
$form-element-horizontal-padding-em: rem-to-em(harmony-spacing($grid-gutter-width-rem / 2, $form-element-border-width), $form-element-typography-size-level) !default
$form-element-checkfield-size-em: 1.25em !default

Default size of checkboxes and radios.

$form-element-track-height-em: 0.25em !default
$form-element-thumb-width-em: 1.25em !default
$form-element-thumb-height-em: $form-element-thumb-width-em !default

Typography

$form-element-typography-size-level: 6 !default
$form-element-small-typography-size-level: 7 !default
$form-element-large-typography-size-level: 5 !default

Border

$form-element-border-width: $line-width-main !default
$form-element-border-style: solid !default
$form-element-border-radius: $border-radius-main !default
$form-element-border-color: $line-color-muted !default
$form-element-border-color-on-error: $line-color-danger !default
$form-element-border-color-on-focus: $line-color-primary !default
$form-element-track-border-radius: $border-radius-main !default
$form-element-thumb-border-radius: 100% !default
$form-element-thumb-border-color: transparent !default
$form-element-thumb-border-color-on-error: $form-element-border-color-on-error !default
$form-element-thumb-border-color-on-focus: null !default

Color

$form-element-color: $color-main !default
$form-element-color-on-error: null !default
$form-element-color-on-focus: null !default
$form-placeholder-color: $color-muted !default
$form-placeholder-color-on-error: null !default
$form-placeholder-color-on-focus: null !default

Background

$form-element-background: $background-color-main !default
$form-element-background-on-focus: null !default
$form-element-background-on-error: null !default
$form-element-track-background: darken($background-color-muted, 4%) !default !default
$form-element-track-background-on-focus: null !default
$form-element-track-background-on-error: null !default
$form-element-thumb-background: $form-element-track-background !default
$form-element-thumb-background-on-error: null !default
$form-element-thumb-background-on-focus: $background-color-primary !default

Shadow

$form-element-box-shadow: null !default
$form-element-box-shadow-on-focus: null !default
$form-element-box-shadow-on-error: null !default

Icon

$form-element-icon-size-em: null !default
$form-element-icon-color: lighten($color-muted, 10%) !default
$form-element-icon-color-on-error: $form-element-border-color-on-error !default
$form-element-icon-color-on-focus: $form-element-border-color-on-focus !default
$form-element-search-icon: '<svg viewBox="..."><path fill="#fill"...</svg>' !default

The #fill texts will be automatically replaced by color values, you don’t need set it.

$form-element-select-icon: '<svg viewBox="..."><path fill="#fill"...</svg>' !default

The #fill texts will be automatically replaced by color values, you don’t need set it.

$form-element-add-icon: '<svg viewBox="..."><path fill="#fill"...</svg>' !default

The #fill texts will be automatically replaced by color values, you don’t need set it.

$form-element-checked-icon: '<svg viewBox="..."><path fill="#fill"...</svg>' !default

The #fill texts will be automatically replaced by color values, you don’t need set it.

$form-element-checked-icon-color: $form-element-color !default
$form-element-checked-icon-color-on-error: null !default
$form-element-checked-icon-color-on-focus: null !default

Helper

$form-helper-typography-size-level: 7 !default
$form-helper-small-typography-size-level: null !default
$form-helper-large-typography-size-level: 6 !default
$form-hint-color: $color-muted !default
$form-error-color: $color-danger !default

Label

$form-label-typography-size-level: 6 !default
$form-label-small-typography-size-level: 7 !default
$form-label-large-typography-size-level: 5 !default
$form-label-color: null !default
$form-label-required-content: " | Required" !default
$form-label-required-color: $color-danger !default