Forms

Search…
Forms
Most of DroneDeploy's components follow Material Design guidelines.
Input Fields
The .input-field allow users to input data. The bottom border of the input field should light up on focus with our blue brand color, hex: #2196F3.
1
<div class="row">
2
  <div class="input-field col-4">
3
    <input type="text" class="validate">
4
    <label for="first_name">Username</label>
5
  </div>
6
</div>
7
<div class="row">
8
  <div class="input-field col-4">
9
    <input type="password" class="validate">
10
    <label for="password">Password</label>
11
  </div>
12
</div>
Copied!
Error Messaging
By adding data-error as an attribute and the .invalid class to your <div> and <input> you can add custom messaging to your input field label.
1
<div class="row">
2
  <div class="input-field invalid col-4" data-error="wrong">
3
    <input id="email" type="email" class="invalid">
4
    <label for="email">Email</label>
5
  </div>
6
</div>
Copied!
Success Messaging
By adding a .valid class to your input field you can highlight the border of the input with green, indicating success.
​
​
1
<div class="row">
2
  <div class="input-field invalid col-4" data-error="Invalid email">
3
  <input id="email" type="email" class="invalid">
4
  <label for="email">Email</label>
5
  </div>
6
</div>
Copied!
Textarea Field
A textarea should be used when there are multiple lines of content that needs to be added. The textarea input height is liquid and will re-size according to the amount of content.
1
  <div class="row">
2
    <div class="input-field col-4">
3
      <textarea id="textarea1" class="materialize-textarea"></textarea>
4
      <label for="textarea1">Textarea</label>
5
    </div>
6
  </div>
Copied!
Select
Selects allow you to suggest options with one selection allowed.
1
<div class="select">
2
    <select class="select-text">
3
        <option value="" disabled selected>Choose your option</option>
4
        <option value="1">Option 1</option>
5
        <option value="2">Option 2</option>
6
        <option value="3">Option 3</option>
7
    </select>
8
    <span class="select-highlight"></span>
9
    <span class="select-bar"></span>
10
    <label class="select-label"></label>
11
</div>
Copied!
Select Disabled State
Add disabled as an attribute to the <select> element to disable the whole select component.
1
<div class="select">
2
    <select class="select-text" disabled>
3
        <option value="" disabled selected>Choose your option</option>
4
        <option value="1">Option 1</option>
5
        <option value="2">Option 2</option>
6
        <option value="3">Option 3</option>
7
    </select>
8
    <span class="select-highlight"></span>
9
    <span class="select-bar"></span>
10
    <label class="select-label"></label>
11
</div>
Copied!
Radio Buttons
Radio buttons are used when there is a group of options and only one selection is allowed.
1
<p>
2
<input name="group1" type="radio" id="option1" />
3
<label for="option1">Option 1</label>
4
</p>
5
​
6
<p>
7
<input name="group1" type="radio" id="option2" />
8
<label for="option2">Option 2</label>
9
</p>
Copied!
Switches
A switch has two states - on and off.
1
<div class="switch">
2
  <label>
3
    <input type="checkbox">
4
    <span class="lever"></span>
5
  </label>
6
</div>
Copied!
Checkboxes
Checkboxes are used when there is a true or false option. Checkboxes can also be used to select multiple items in a group.
1
<p>
2
  <input type="checkbox" id="test1" />
3
  <label for="test1">Phantom 4</label>
4
</p>
5
​
6
 <p>
7
   <input type="checkbox" id="test2" />
8
   <label for="test2">Inspire 2</label>
9
</p>
Copied!