# Form

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <form>
        <fieldset class="fieldset">
            <legend class="legend">Details</legend>
            <div class="form-group">
                <label class="form-label form-label--emphasized" for="title">Title</label>
                <select class="form-control" id="title">
                    <option value="">Please choose</option>
                    <option value="dr">Dr.</option>
                    <option value="prof-dr">Prof. Dr.</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label form-label--emphasized" for="first_name">First name</label>
                <input type="text" id="first_name" class="form-control" placeholder="e.g. Arnulf Beckenbauer" />
                <small class="form-text">Enter something meaningful</small>
            </div>
            <div class="form-group form-group--invalid">
                <label class="form-label form-label--emphasized" for="last_name">Last name</label>
                <input type="text" id="last_name" class="form-control" />
                <small class="form-text">Last name is mandatory</small>
            </div>
            <div class="form-group">
                <label class="form-label form-label--emphasized" for="bio">Biography</label>
                <textarea id="bio" class="form-control" rows="8"></textarea>
            </div>
            <div class="form-group">
                <div class="form-label form-label--emphasized">Sex</div>
                <div class="custom-form-control radio">
                    <input type="radio" id="customRadio1" checked="checked" name="customRadio" class="form-control__input" />
                    <label class="form-label" for="customRadio1">Female</label>
                </div>
                <div class="custom-form-control radio">
                    <input type="radio" id="customRadio2" name="customRadio" class="form-control__input" />
                    <label class="form-label" for="customRadio2">Male</label>
                </div>
                <div class="custom-form-control radio">
                    <input type="radio" id="customRadio3" name="customRadio" class="form-control__input" />
                    <label class="form-label" for="customRadio3">Dunno</label>
                </div>
            </div>
            <div class="form-group">
                <div class="custom-form-control checkbox">
                    <input id="custom-checkbox-1" type="checkbox" class="form-control__input" />
                    <label for="custom-checkbox-1" class="form-label">I'm a gold member</label>
                </div>
            </div>
        </fieldset>
        <input type="submit" value="Submit" class="btn btn--cta btn--small" />
    </form>

    <div class="demo demo--inverted">
        <form class="form--inverted">
            <fieldset class="fieldset">
                <legend class="legend">Details</legend>
                <div class="form-group">
                    <label class="form-label form-label--emphasized" for="title">Title</label>
                    <select class="form-control" id="title">
                        <option value="">Please choose</option>
                        <option value="dr">Dr.</option>
                        <option value="prof-dr">Prof. Dr.</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label form-label--emphasized" for="first_name">First name</label>
                    <input type="text" id="first_name" class="form-control" placeholder="e.g. Arnulf Beckenbauer" />
                    <small class="form-text">Enter something meaningful</small>
                </div>
                <div class="form-group form-group--invalid">
                    <label class="form-label form-label--emphasized" for="last_name">Last name</label>
                    <input type="text" id="last_name" class="form-control" />
                    <small class="form-text">Last name is mandatory</small>
                </div>
                <div class="form-group">
                    <label class="form-label form-label--emphasized" for="bio">Biography</label>
                    <textarea id="bio" class="form-control" rows="8"></textarea>
                </div>
                <div class="form-group">
                    <div class="form-label form-label--emphasized">Sex</div>
                    <div class="custom-form-control radio">
                        <input type="radio" id="customRadio1" checked="checked" name="customRadio" class="form-control__input" />
                        <label class="form-label" for="customRadio1">Female</label>
                    </div>
                    <div class="custom-form-control radio">
                        <input type="radio" id="customRadio2" name="customRadio" class="form-control__input" />
                        <label class="form-label" for="customRadio2">Male</label>
                    </div>
                    <div class="custom-form-control radio">
                        <input type="radio" id="customRadio3" name="customRadio" class="form-control__input" />
                        <label class="form-label" for="customRadio3">Dunno</label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="custom-form-control checkbox">
                        <input id="custom-checkbox-1" type="checkbox" class="form-control__input" />
                        <label for="custom-checkbox-1" class="form-label">I'm a gold member</label>
                    </div>
                </div>
            </fieldset>
            <input type="submit" value="Submit" class="btn btn--cta btn--small" />
        </form>
    </div>

`
`

    <form>
        <fieldset class="fieldset">
            <legend class="legend">Details</legend>
            <div class="form-group">
                <label class="form-label form-label--emphasized" for="title">Title</label>
                <select class="form-control" id="title">
                    <option value="">Please choose</option>
                    <option value="dr">Dr.</option>
                    <option value="prof-dr">Prof. Dr.</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label form-label--emphasized" for="first_name">First name</label>
                <input type="text" id="first_name" class="form-control" placeholder="e.g. Arnulf Beckenbauer" />
                <small class="form-text">Enter something meaningful</small>
            </div>
            <div class="form-group form-group--invalid">
                <label class="form-label form-label--emphasized" for="last_name">Last name</label>
                <input type="text" id="last_name" class="form-control" />
                <small class="form-text">Last name is mandatory</small>
            </div>
            <div class="form-group">
                <label class="form-label form-label--emphasized" for="bio">Biography</label>
                <textarea id="bio" class="form-control" rows="8"></textarea>
            </div>
            <div class="form-group">
                <div class="form-label form-label--emphasized">Sex</div>
                <div class="custom-form-control radio">
                    <input type="radio" id="customRadio1" checked="checked" name="customRadio" class="form-control__input" />
                    <label class="form-label" for="customRadio1">Female</label>
                </div>
                <div class="custom-form-control radio">
                    <input type="radio" id="customRadio2" name="customRadio" class="form-control__input" />
                    <label class="form-label" for="customRadio2">Male</label>
                </div>
                <div class="custom-form-control radio">
                    <input type="radio" id="customRadio3" name="customRadio" class="form-control__input" />
                    <label class="form-label" for="customRadio3">Dunno</label>
                </div>
            </div>
            <div class="form-group">
                <div class="custom-form-control checkbox">
                    <input id="custom-checkbox-1" type="checkbox" class="form-control__input" />
                    <label for="custom-checkbox-1" class="form-label">I'm a gold member</label>
                </div>
            </div>
        </fieldset>
        <input type="submit" value="Submit" class="btn btn--cta btn--small" />
    </form>

    <div class="demo demo--inverted">
        <form class="form--inverted">
            <fieldset class="fieldset">
                <legend class="legend">Details</legend>
                <div class="form-group">
                    <label class="form-label form-label--emphasized" for="title">Title</label>
                    <select class="form-control" id="title">
                        <option value="">Please choose</option>
                        <option value="dr">Dr.</option>
                        <option value="prof-dr">Prof. Dr.</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label form-label--emphasized" for="first_name">First name</label>
                    <input type="text" id="first_name" class="form-control" placeholder="e.g. Arnulf Beckenbauer" />
                    <small class="form-text">Enter something meaningful</small>
                </div>
                <div class="form-group form-group--invalid">
                    <label class="form-label form-label--emphasized" for="last_name">Last name</label>
                    <input type="text" id="last_name" class="form-control" />
                    <small class="form-text">Last name is mandatory</small>
                </div>
                <div class="form-group">
                    <label class="form-label form-label--emphasized" for="bio">Biography</label>
                    <textarea id="bio" class="form-control" rows="8"></textarea>
                </div>
                <div class="form-group">
                    <div class="form-label form-label--emphasized">Sex</div>
                    <div class="custom-form-control radio">
                        <input type="radio" id="customRadio1" checked="checked" name="customRadio" class="form-control__input" />
                        <label class="form-label" for="customRadio1">Female</label>
                    </div>
                    <div class="custom-form-control radio">
                        <input type="radio" id="customRadio2" name="customRadio" class="form-control__input" />
                        <label class="form-label" for="customRadio2">Male</label>
                    </div>
                    <div class="custom-form-control radio">
                        <input type="radio" id="customRadio3" name="customRadio" class="form-control__input" />
                        <label class="form-label" for="customRadio3">Dunno</label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="custom-form-control checkbox">
                        <input id="custom-checkbox-1" type="checkbox" class="form-control__input" />
                        <label for="custom-checkbox-1" class="form-label">I'm a gold member</label>
                    </div>
                </div>
            </fieldset>
            <input type="submit" value="Submit" class="btn btn--cta btn--small" />
        </form>
    </div>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      form,
      .fieldset {
        > * + * {
          margin-top: $spacer-md;
        }
      }

      .form--inverted {
        .form-label,
        .form-text {
          color: $form-label-inverted-color;
        }

        .form-control {
          border-color: $form-control-inverted-border-color;
          caret-color: $form-control-inverted-caret-color;

          &:hover,
          &:focus {
            color: $form-control-inverted-focus-color;
            background-color: $form-control-inverted-focus-bg;
          }
        }

        .form-group--invalid {
          .form-control {
            border-color: $form-control-invalid-border-color;
          }
        }
      }

  `
- URL: /components/raw/form/_form.scss
- Filesystem Path: components/03-organisms/form/_form.scss
- Size: 541 Bytes

- Handle: @form
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/03-organisms/form/form.html

No notes defined.