Foundation
Custom Forms
It's so crazy easy to create easy-to-style custom forms. It's practically a crime.
We've learned a lot from our previous iteration of custom forms. Thanks to awesome community contributions, we have even better custom forms. The new implementation is cleaner and more succinct, with less duplication of code. You just need to make sure to have the right JS hooked up for things to work properly; learn more about that below. The example above looks like this:
<form class="custom">
<div class="row">
<div class="large-4 columns">
<label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;" CHECKED><span class="custom radio checked"></span> Radio Button 1</label>
<label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 2</label>
<label for="radio1"><input name="radio1" type="radio" id="radio1" disabled style="display:none;"><span class="custom radio"></span> Radio Button 3</label>
</div>
<div class="large-4 columns">
<label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none;"><span class="custom checkbox"></span> Label for Checkbox</label>
<label for="checkbox2"><input type="checkbox" id="checkbox2" CHECKED style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
<label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3" style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
</div>
<div class="large-4 columns">
<label for="customDropdown1">Medium Example</label>
<select id="customDropdown1" class="medium">
<option DISABLED>This is a dropdown</option>
<option>This is another option</option>
<option>This is another option too</option>
<option>Look, a third option</option>
</select>
</div>
</div>
</form>Building Custom Radio Inputs
A radio input is a common form element that can look pretty ugly by default. We've simplified the look and feel with a custom <span> that you can customize if you need to. You can even use <input disabled> to make the radio inactive.
<form class="custom">
<label for="radio1">
<input name="radio1" type="radio" id="radio1" style="display:none;">
<span class="custom radio"></span> Radio Button 1
</label>
</form>Building Custom Checkboxes
The checkbox input is another very common form element. These are handy for lists of options that can be selected in multiples, things like finding out which Ke$ha song should be used for a room name. You can build these using the same <span> technique. You can even use <input disabled> to make the radio inactive.
<form class="custom">
<label for="checkbox1">
<input type="checkbox" id="checkbox1" style="display: none;">
<span class="custom checkbox"></span> Label for Checkbox
</label>
</form>Building Custom Selects
Sometimes you need to let people select a single item from a long list of options. This is what <select> elements are for. We've taken these a step further by including our own custom style that looks a lot better than inconsistent browser defaults. You can set any of the <option> elements to <option disabled> to make them unable to select. Custom selects are built like you'd expect:
For those who may want to apply custom styles to a specific dropdown, any classes on the <select> element will be appended to the generated <div class="custom dropdown"> element.
<form class="custom">
<label for="customDropdown">Medium Example</label>
<select id="customDropdown">
<option DISABLED>This is a dropdown</option>
<option>This is another option</option>
<option>This is another option too</option>
<option>Look, a third option</option>
</select>
</form>Various Sizes
You have access to classes that will control the size of the select element. They'll span 100% of their container by default.
<select id="customDropdown" class="small"></select>
<select id="customDropdown" class="medium"></select>
<select id="customDropdown" class="large"></select>
Using the Pre/postfix Concept With Custom Forms
We showed you how to use the prefix and postfix elements on our forms documentation page. You can employ that same technique here and make custom forms act as your slave to create some very complex forms.
<form class="custom">
<div class="row">
<div class="large-6 columns">
<div class="row collapse">
<div class="large-9 small-9 columns">
<span class="prefix">mysubdomain</span>
</div>
<div class="large-3 small-3 columns">
<select>
<option>.com</option>
<option>.co</option>
<option>.ca</option>
</select>
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row collapse">
<div class="large-10 small-10 columns">
<select>
<option>google</option>
<option>yahoo</option>
<option>bing</option>
</select>
</div>
<div class="large-2 small-2 columns">
<span class="postfix">.com</span>
</div>
</div>
</div>
</div>
<div class="row collapse">
<div class="small-8 columns">
<select>
<option>google</option>
<option>yahoo</option>
<option>bing</option>
</select>
</div>
<div class="small-4 columns">
<a href="#" class="button postfix">Button</a>
</div>
</div>
</form>Using the JavaScript
In order to get the custom forms to function, you'll need to include foundation.forms.js. You'll also need to make sure to include zepto.js and foundation.js above the forms plugin.
Read how to install Foundation JavaScript
Required Foundation Library: foundation.forms.js
Javascript Events
The custom selects can be refreshed by triggering a javascript change event on the native select. Custom forms will automatically check for and update option tags that have been added or removed when you trigger the change event. If you change the value of the native select, you will have to pass in the force_refresh argument when triggering the change event to ensure that the custom form gets updated correctly.
$("#customDropdown1").trigger("change"); // Use to add or remove options
$("#customDropdown1").trigger("change", true); // Use to change the value of the select
Optional JavaScript Configuration
Custom Form options can only be passed in during initialization at this time. However, you can bind to the open, change, and click events depending on the form elements.
{
disable_class: 'no-custom'
}