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