Forms

Why should forms be ugly? Luma provides custom styling for all common input elements.

Basic Layout

Use fieldset or a div with class field to group input elements:

<form>
    <div class="field">
        <label for="name">Name</label>
        <input type="text" id="name" name="name" placeholder="Your Name">
    </div>
    <div class="field">
        <label for="message">Message</label>
        <textarea id="message" name="message" placeholder="Send me a message"></textarea>
    </div>
    <div class="field">
        <input type="checkbox" class="checkbox" id="terms" name="terms">
        <label for="terms">I accept all the evil terms and conditions.</label>
    </div>

    <input type="submit" class="button is-outline" value="Submit">
</form>

Alignment

You can make forms horizontal by using our grid system:

<form>
    <div class="field row">
        <label for="name" class="column is-2">Name</label>
        <div class="column is-10">
          <input type="text" id="name" name="name" placeholder="Your Name">
        </div>
    </div>
    <div class="field row">
        <label for="message" class="column is-2">Message</label>
        <div class="column is-10">
            <textarea id="message" name="message" placeholder="Send me a message"></textarea>
        </div>
    </div>
    <div class="field">
        <input type="checkbox" class="checkbox" id="terms" name="terms">
        <label for="terms">I accept all the evil terms and conditions.</label>
    </div>

    <input type="submit" class="button is-outline" value="Submit">
</form>

Add the is-centered class to a field to make all elements inside vertically centered:

<form>
    <div class="field is-centered row">
        <label class="column is-4">Details</label>
        <div class="column is-3">
            <input type="text" id="name" placeholder="Order No.">
        </div>
        <div class="column is-2">
            <input type="checkbox" class="checkbox" id="terms3">
            <label for="terms-zero">Term 0</label>
        </div>
        <div class="column is-2">
            <input type="checkbox" class="checkbox" id="terms4">
            <label for="terms-one">Term 1</label>
        </div>
    </div>
</form>

Form Elements

Text Inputs

<div class="field">
    <label for="title">Title</label>
    <input type="text" id="title" name="title" placeholder="Title">
</div>
<div class="field">
    <label for="title-disabled">Disabled</label>
    <input type="text" id="title-disabled" name="title-disabled" placeholder="Help! I'm Disabled!" disabled>
</div>

If you use the Luma Javascript, you can automatically resize textareas (shrink / expand) on user input by using luma.textarea('textarea');. All elements with the data-resize="textarea" attribute will be initialized on page load. Later added elements will need to be initialized using the aforementioned API call.

<textarea data-resize="textarea" placeholder="I've got big plans to expand!"></textarea>

Checkboxes

Luma uses custom CSS checkboxes (applied when using the checkbox class). Check them out:

<div class="field">
    <input type="checkbox" class="checkbox" id="check" name="check">
    <label for="check">Check 123</label>
</div>
<div class="field">
    <input type="checkbox" class="checkbox" id="check-disabled" name="check-disabled" disabled>
    <label for="check-disabled">Disabled Checkbox</label>
</div>

Radios

Luma also uses custom CSS radios (applied when using the radio class):

<div class="field">
    <input type="radio" class="radio" id="radio1" name="radios">
    <label for="radio1">Option 1</label>
</div>
<div class="field">
    <input type="radio" class="radio" id="radio2" name="radios">
    <label for="radio2">Option 2</label>
</div>
<div class="field">
    <input type="radio" class="radio" id="radio3" name="radios" disabled>
    <label for="radio3">Disabled Option 3</label>
</div>

Selects

For selects, we offer two variants. Without any javascript some default styling is applied:

<select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option disabled>Option 3 Disabled</option>
</select>

If you choose to use the Luma Javascript (or include style-select on your own) the select boxes come in a nice custom styling:

<div class="row">
    <div class="column is-3">
        <select data-style="select">
            <option>Option 1</option>
            <option>Option 2</option>
            <option disabled>Option 3 Disabled</option>
        </select>
    </div>
</div>

To apply this styling, call luma.select('select') or with any other selector. By default, all selects with attribute data-style="select" will be initialized this way. Later added elements will need to be initialized again using the aforementioned API call

File Uploads

You can replace the default file select button with a custom button using the following syntax. Apply any of our button classes to the label to style your file upload button.

<div class="file">
    <label for="file" class="file__label">
        <input type="file" id="file" class="file__input">
        <span class="button is-outline">
            <span class="icon">
                <i class="mdi mdi-cloud-upload"></i>
            </span>
            <span>Upload</span>
        </span>
    </label>
</div>

If you want, you can also include an additional box next to the button to display the selected file name.

<div class="file has-name">
    <label for="file" class="file__label">
        <input type="file" id="file" class="file__input" data-display="file">
        <span class="button is-outline">
            <span class="icon">
                <i class="mdi mdi-cloud-upload"></i>
            </span>
            <span>Upload</span>
        </span>
        <span class="file__name">Choose file...</span>
    </label>
</div>

For actually displaying the filename you’ll require some javascript. If you’re using the Luma Javascript simply call luma.file('.file__input'); or using a similar selector. All file inputs with attribute data-display="file" will automatically be initialized at page load.