Form group

View Source

Form group component pack for Seed

Install

npm install seed-form-group --save

Dependencies

Example

The form group component helps group form elements like labels and inputs.

<form>
  <div class="c-form-group">
    <label for="input1">Label</label>
    <input id="input1" class="c-input" placeholder="Placeholder">
  </div>
  <div class="c-form-group">
    <label for="input2">Label</label>
    <input id="input2" class="c-input" placeholder="Placeholder">
  </div>
</form>

Inline

Form groups can be inlined using a variety of methods.

Using Grid classes

It is recommended that seed-grid object classes are used as it provides flexible options for responsive styles and sizing.

<div class="o-row">
  <div class="o-col-6">
    <div class="c-form-group">
      <label>Label</label>
      <input class="c-input" placeholder="Placeholder">
    </div>
  </div>
  <div class="o-col-6">
    <div class="c-form-group">
      <label>Label</label>
      <input class="c-input" placeholder="Placeholder">
    </div>
  </div>
</div>

Using Inline classes

Alternatively, seed-inline object classes can also be used.

<div class="o-inline">
  <div class="o-inline__item">
    <div class="c-form-group">
      <label>Label</label>
      <input class="c-input" placeholder="Placeholder">
    </div>
  </div>
  <div class="o-inline__item">
    <div class="c-form-group">
      <label>Label</label>
      <input class="c-input" placeholder="Placeholder">
    </div>
  </div>
</div>

States

Applying the desired state class on .c-form-group will automatically adjust the <label> and seed-input styles to match.

<div class="c-form-group is-error">
  <label>Error</label>
  <input class="c-input" placeholder="Placeholder">
</div>
<div class="c-form-group is-success">
  <label>Success</label>
  <input class="c-input" placeholder="Placeholder">
</div>
<div class="c-form-group is-warning">
  <label>Warning</label>
  <input class="c-input" placeholder="Placeholder">
</div>

Configurations

Below are the default Sass configuration variables for seed-form-group. The variables can be found in the pack’s _config.scss file.

seed-form-group/_config.scss
// Namespace
$seed-form-group-namespace: c-form-group !default;

// Configs
$seed-form-group-margin-bottom: 20px !default;
↑Back to top
© Help Scout 2024