<%= @page_title %>

It's so crazy easy to create easy-to-style custom forms. It's practically a crime.

Radio Button 1 Radio Button 2 Radio Button 3

Label for Checkbox Label for Checkbox Label for Checkbox

Medium Example This is a dropdown This is another option This is another option too Look, a third option

---

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:

<%= code_example '

Radio Button 1 Radio Button 2 Radio Button 3

Label for Checkbox Label for Checkbox Label for Checkbox

Medium Example This is a dropdown This is another option This is another option too Look, a third option

', :html %>

---

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.

<%= code_example '

Radio Button 1

', :html %>

Radio Button 1

---

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.

<%= code_example '

Label for Checkbox

', :html %>

Label for Checkbox

---

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.

<%= code_example '

Medium Example This is a dropdown This is another option This is another option too Look, a third option

', :html %>

Default Example This is a dropdown This is another option This is another option too Look, a third option

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.

<%= code_example ' ', :html %>

---

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.

<%= code_example '

mysubdomain

.com .co .ca

google yahoo bing

.com

google yahoo bing

Button

', :html %>

mysubdomain

.com .co .ca

google yahoo bing

.com

google yahoo bing

Button

---

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. Above your closing </body> tag include the following line of code and make sure you have the JS in your directory.

Read how to install Foundation JavaScript

Required Foundation Library: foundation.forms.js

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.

<%= code_example " { disable_class: 'no-custom' }", :js %>